Angularjs integrates the pagination plug-in to implement the paging function. angularjspagination

Angularjs integrates the pagination plug-in to implement the paging function. angularjspagination

Angularjs and pagination plug-ins can perfectly implement front-end paging, filtering, search, and other functions. The premise is of course that there must be background development cooperation. Today we only talk about front-end implementation:

1. Introduce the pagination plug-in. Load the pagination plug-in before angularjs is introduced;

2. When defining the controller, You need to inject the pagination plug-in;

3. The principle of paging front-end basically requires a default asynchronous request. When a page is clicked, the system requests the data again and sends the current page number to the background. If you have the data search or data filtering function, when sending a request, you must include the search parameters jointly defined with the backend development;

4. There is not much nonsense. Go to the code and use the basic template:

Var url = 'request path'; $ http ({method: "post", url: url }). success (function (_ data) {$ scope. contentlist = _. data. items; // data list $ scope. pageparameters = _ data. data; $ scope. searchparameters = {// define your search parameters} // initialize the paging data var pagination; $ scope. paginationInt = function ($ data) {pagination = $ scope. pagination = Pagination. create ({itemsCount: $ data. total_items, // total itemsPerPage: $ data. epage, // number of entries per page currentPage: $ Data. page // current page number}); // pagination. onChange = function (page) {$ scope. page (page) ;};}; $ scope. paginationInt ($ scope. pageparameters); // The parameter $ scope. borrowSearch = function (type, val) {$ scope. borrowData [type] = val; $ scope. page (1); // each search starts from the first page}; // sort $ scope. searchTab ={}; $ scope. searchStatus = true; $ scope. current = {// your parameter}; // page Jump operation $ scope. skipInput = function (page, endPa Ge) {if (! IsNaN (page) {var page = parseInt (page, 20), endPage = parseInt (endPage, 20); if (page> endPage | page <= 0) {$ scope. skipError = true;} else {$ scope. skipError = false ;}} else {$ scope. skipError = true ;}}; $ scope. page = function (page) {$ scope. searchparameters. current_page = page; // The paging method $ http ({url: url, method: "post", params: $ scope. searchparameters }). success (function (data) {$ scope. contentlist = data. items ;});};});

The HTML method is skipped here. If you do not understand it, you can send a private message!

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