Angularjs + bootstrap implement the instance code for custom paging, angularjsbootstrap

Angularjs + bootstrap implement the instance code for custom paging, angularjsbootstrap

Currently, I am working on a java web page without using pagination of the Framework. So I need to implement pagination by myself. I thought of using angularjs to implement pagination, and the data is obtained from the background through ajax.

Plug-ins

Baidu a bit, see a more beautiful plug-in, directly use the plug-in, and modify part of the details, making it suitable for my project, the plug-in address is: (https://github.com/miaoyaoyao/AngularJs-UI)

Usage

1、in the header of the web page angularjs?bootstarpto and the plug-in, the plug-in is mainly ng-pagination.css and ng-pagination.js

<link rel="stylesheet" href="/nutz-test/static/bootstrap/bootstrap.min.css" rel="external nofollow" ><link rel="stylesheet" href="/nutz-test/static/angular/ng-pagination.css" rel="external nofollow" ><script src="/nutz-test/static/jquery/jquery.min.js"></script><script src="/nutz-test/static/angular/angular.min.js"></script><script src="/nutz-test/static/angular/ng-pagination.js"></script><script src="/nutz-test/static/bootstrap/bootstrap.min.js"></script>

2. Table code and paging code

<Div id = "app" ng-app = "myApp" ng-controller = "myCtrl"> <div style = "overflow: auto; width: 100%; "> <table class =" table-hover table-striped table-bordered "id =" j-table "> <thead> <tr> <th> name </th> <th> age </th> <th> phone number </th> <th> position </th> </tr> </thead> <tbody> <tr ng-repeat = "item in list"> <th title = "{item. name }}" >{{ item. name }}</th> <th title = "{item. age }}" >{{ item. age }}</th> <th title = "{item. tel }}"> {{ Item. tel }}</th> <th title = "{item. position }}" >{{ item. position }}</th> </tr> </tbody> </table> </div> <! -- Reference the plug-in page --> <div class = "pager"> <pager page-count = "pageCount" current-page = "currentPage" on-page-change = "onPageChange () "first-text =" Homepage "next-text =" next "prev-text =" previous "last-text =" last "show-goto =" true "goto-text = "Jump to"> </pager> </div>

3. javascript code

The focus of pagination is to obtain data from the backend. You only need to upload pageSize (the number displayed on each page) and pageIndex (the current page number) to the backend through the post request. The actual data and pageCount (page number) returned by the background are sent to the foreground. Here, the onPageChange () method is to click the page number to obtain data from the background through ajax, And the myinit () method is initialized when the page is requested for the first time. $ Scope. currentPage is the page number. For example, when you click the next page, it will add one, and then you can use the post request to retrieve the data of the next page in the background.

<Script type = "text/javascript"> var app = angular. module ('myapp', ['ng-pagination']); app. controller ('myctrl ', [' $ scope ', function ($ scope) {$ scope. onPageChange = function () {// ajax request to load data console. log ($ scope. currentPage); // here is the post request to fetch data from the background $. ajax ({type: "post", url: '/nutz-test/show/pagination', data: {"pageSize": 5, "pageIndex": $ scope. currentPage}, dataType: "json", success: function (data) {$ scope. $ apply (function () {$ scope. list = data. list; $ scope. pageCount = data. pageCount;}) ;}}; // initialization, set to the first page, with 5 $ scope entries displayed on each page. myinit = function () {$. ajax ({type: "post", url: '/nutz-test/show/pagination', data: {"pageSize": 5, "pageIndex": 1}, dataType: "json", success: function (data) {$ scope. $ apply (function () {$ scope. list = data. list; $ scope. pageCount = data. pageCount ;}) ;}}}; $ scope. myinit () ;}]); </script>

Notes

1, the plug-in only one page will appear in the case of paging plug-ins can not be loaded, so you need to modify the ng-pagination.js code.

Open the ng-pagination.js, locate the final template, and modify pageCount> = 1, as shown in.

2. The jump function is not supported in ie and 360, because ie and 360 do not have the number. isNaN () method. Therefore, you need to modify the paging plug-in method to isNaN ().

Navigate to the Number. isNaN () method of the ng-pagination.js and change it to as shown in.

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