Use of the jQuery Pagination paging plug-in, jquerypagination
I. Reference CSS and JS:
<Link href = "/Content/Plugins/jQuery. pagination_v2.2/pagination.css "rel =" stylesheet "type =" text/css "/> <script src ="/Content/Plugins/jQuery. pagination_v2.2/jquery. pagination. js "type =" text/javascript "> </script>View Code
Ii. HTML:
<Div id = "Pagination" class = "flickr" style = "margin-top: 10px; margin-left: 10px;"> </div>View Code
Iii. JS:
$ (Function () {var total = parseInt ("@ (ViewBag. total) "); var page = parseInt (" @ (ViewBag. page) ")-1; var pageSize = parseInt (" @ (ViewBag. pageSize) "); $ (" # Pagination "). pagination (total, {callback: function (page_id) {window. location = "BoardList? Page = "+ page_id +" & pageSize = "+ this. items_per_page;}, // PageCallback () is the page turning function called. Prev_text: "Previous page", next_text: "Next page", items_per_page: 10, // number of data entries on each page num_display_entries: 1, // number of entries on both sides of the first and last pages current_page: page, // The current page number num_edge_entries: 11 // The number of pagination entries of the continuous paging subject part });});View Code
Iv. Background code:
Public ActionResult BoardList () {PagerModel pager = new PagerModel (); if (Request ["page"] = null) {pager. page = 1; pager. rows = 10; pager. sort = "Id"; pager. order = "desc";} else {pager. page = int. parse (Request ["page"]) + 1; pager. rows = int. parse (Request ["pageSize"]); pager. sort = "Id"; pager. order = "desc";} boardManageService. getList (ref pager); List <BoardModel> boardList = pager. result as List <BoardModel>; ViewData ["BoardModelList"] = boardList; ViewBag. page = pager. page; ViewBag. total = pager. totalRows; ViewBag. pageSize = pager. rows; return View () ;}# endregionView Code