Example of bootstrap paginator paging front and back-end usage, bootstrappaginator

Example of bootstrap paginator paging front and back-end usage, bootstrappaginator

Examples of bootstrap paginator paging front and back-end usage for your reference. The specific content is as follows:

Preparations:

Bootstrap-paginator.js plugin
Github open-source project Baidu download

Import the JS file (jquery1.820.bootstrap.min.js?bootstrap.css + bootstrap-paginator.js)

<! -- Modify the path according to your project --> <link rel = "stylesheet" href = "/bootstrap/css/bootstrap.css" rel = "external nofollow"> <script type = "application/javascript "src ="/js/jquery-3.2.1.min.js "> </script> <script type =" application/javascript "src ="/bootstrap/js/bootstrap. min. js "> </script> <script type =" application/javascript "src ="/bootstrap/js/bootstrap-paginator.min.js "> </script>

<! -- The jsp page only needs one ul to specify the class and id --> <ul class = "pagination" id = "page"> </ul>

List page request in JS

All kinds of asynchronous requests are applicable (this example uses angular $ http requests)
Options is the configuration of the plug-in.
BootstrapMajorVersion: Required for Version 3
OnPageClicked: Click the number of pages. The page is the current page.
The itemTexts attribute replaces the <and other symbols with the text such as the previous page (you can also leave it empty)

$ Http. post ('.. /userCtrl/getUsers '). success (function (response) {var pageCount = response. total; $ scope. users = response. users; var options = {currentPage: 1, totalPages: (pageCount % 10) = 0? (PageCount/10) :( pageCount/10) + 1, numberOfPages: 10, bootstrapMajorVersion: 3, itemTexts: function (type, page, current) {switch (type) {case "first": return "Homepage"; case "prev": return "Previous Page"; case "next": return "next page"; case "last ": return "last page"; case "page": return page; }}, onPageClicked: function (event, originalEvent, type, page) {$. post (".. /userCtrl/getUsers ", {" page ": page}, function (map) {$ scope. users = map. users; $ scope. $ apply () ;}, "json") ;}$ ('# page '). bootstrapPaginator (options );}). error (function (response) {alert ("List request error ");});

Background operations

Data after pagination
Total number of records or total number of pages

/*** Request list data ** @ return users */@ RequestMapping ("getUsers") public @ ResponseBody Map <String, Object> selectUsers (Integer page) {if (page = null) page = 1; // the first time the page is loaded, the default is the homepage List <User> users = userService. selectUsers (page); Integer total = userService. getTotal (); // total number of records Map <String, Object> map = new HashMap <String, Object> (); map. put ("users", users); map. put ("total", total); return map ;}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.