JavaScript implements front-end paging control and javascript front-end Paging

JavaScript implements front-end paging control and javascript front-end Paging

Currently, the web focuses on user experience and interactivity. ajax data submission methods have become popular for a long time. It can partially refresh data without refreshing webpages. Most front-end pages request data using ajax (for example, manually constructing a form to simulate submission events ). The query parameters are constructed in js and sent to the backend. After processing in the background, the query parameters are returned in a specific format, which is mostly json and convenient to process. When the background data arrives, the browser re-renders the interface, of course, including the js paging control. If you think that each paging control has an impact on the front-end performance, you can not draw it, but it is relatively troublesome to implement it.

The paging control I wrote references to the code of other netizens. The link is forgotten. The control accepts four parameters or one object. In fact, it is the same. For the latter, only four parameters are placed in one object. PIndex: the page number of each request. pSize: The page size of each request. container: The container for the paging control. fn: how to request data from the server

The closure is mainly used in the code to save the last request information for future use. Although the code can be used directly, the style is not generic, it is easier to adjust the style each time.

Function pagination (obj) {/* pageIndex: index, pageSize: size, count: count, container: container, fn: fn */if (! Obj | typeof obj! = "Object") {return false;} var pageIndex = obj. pageIndex | 1, pageSize = obj. pageSize | 10, count = obj. count | 0, container = obj. container, callback = obj. fn | function () {}; var pageCount = Math. ceil (count/pageSize); if (pageCount = 0) {return false;} if (pageCount <pageIndex) {return false;}/* event binding */function bindEvent () {// Previous Page event $ (container ). find ("> ul>. pg-prev "). unbind ("click "). bind ("click", function () {if (PageIndex <= 1) {return false;} if (typeof callback = "function") {pageIndex --; pageIndex = pageIndex <1? 1: pageIndex; obj. pageIndex = pageIndex; callback (pageIndex); pagination (obj) ;}}); // next page event $ (container ). find ("> ul>. pg-next "). unbind ("click "). bind ("click", function () {if (pageIndex = pageCount) {return false;} if (typeof callback = "function") {pageIndex ++; pageIndex = pageIndex> pageCount? PageCount: pageIndex; obj. pageIndex = pageIndex; callback (pageIndex); pagination (obj) ;}}); $ (container ). find ("> ul> li: not (. pg-more): not (. pg-prev): not (. pg-next )"). unbind ("click "). bind ("click", function () {pageIndex = pageIndex (this).html (); pageIndex = isNaN (pageIndex )? 1: pageIndex; obj. pageIndex = pageIndex; if (typeof callback = "function") {callback (pageIndex); pagination (obj );}});}; /* draw style */function printHead () {var html = []; html. push ('<li class = "pg-prev' + (pageIndex = 1? "Pg-disabled": "") + '"> previous page </li>'); return html. join ("") ;}function printBody () {var html = []; var render = function (num, start) {start = start | 1; for (var I = start; I <= num; I ++) {html. push ('<li class = "' + (pageIndex = I? "Pg-on": "") + '">' + I + '</li>');} if (pageCount <= 7) {render (pageCount);} else {if (pageIndex <4) {render (4); html. push ('<li class = "pg-more">... </li> '); html. push ('<li>' + pageCount + '</li>');} else {html. push ('<li> 1 </li>'); html. push ('<li class = "pg-more">... </li> '); if (pageCount-pageIndex> 3) {render (pageIndex + 1, pageIndex-1); html. push ('<li class = "pg-more">... </li> '); html. push ('<li>' + pageCount + '</li>' );} Else {render (pageCount, pageCount-3) ;}} return html. join ("");} function printTail () {var html = []; html. push ('<li class = "pg-next' + (pageIndex = pageCount? "Pg-disabled": "") + '"> next page </li>'); return html. join ("");} function show () {container. innerHTML = '<ul>' + printHead () + printBody () + printTail () + '</ul>';} show (); bindEvent ();}

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