Compile a paging plug-in based on jquery and a paging plug-in based on jquery

Compile a paging plug-in based on jquery and a paging plug-in based on jquery

It is easy to expand JQuery. As an exercise, you can compile a simple paging plug-in with a small amount of code. You can check the Code directly:

$. Fn. mypagination = function (totalProperty, opts) {opts = $. extend ({perPage: 10, callback: function () {}}, opts ||{}); return this. each (function () {function numPages () {return Math. ceil (totalProperty/opts. perPage);} function selectPage (page) {return function () {currPage = page; if (page <0) currPage = 0; if (page> = numPages ()) currPage = numPages ()-1; render (); $ ('img. page-wait ', panel ). attr ('src', 'images/wait.gif '); opts. callback (currPage + 1); $ ('img. page-wait ', panel ). attr ('src', 'images/nowait.gif ');} function render () {var html = '<table> <tbody> <tr>' + '<td> <a href = "#">  </ a> </td> '+' <td> <a href = "#">  </a> </td> '+ '<td> <span> page/total' + numPages () + 'page </span> </td>' + '<td> <a href = "#">  </a> </td> '+' <td> <a href = "#">  </a> </td> '+' <td>  </td> '+' <td> <span style = "padding-left: 50px; "> Retrieved '+ totalProperty +' records </span> </td> '+' </tr> </tbody> </table> '; var imgFirst = 'images/page-first-disabled.gif '; var imgPrev = 'images/page-prev-disabled.gif'; var imgNext = 'images/page-next-disabled.gif '; var imgLast = 'images/page-last-disabled.gif '; if (currPage> 0) {imgFirst = 'images/page-first.gif '; imgPrev = 'images/page-prev.gif';} if (currPage <numPages ()-1) {imgNext = 'images/page-next.gif '; imgLast = 'images/page-last.gif';} panel. empty (); panel. append (html); $ ('img. page-first ', panel ). bind ('click', selectPage (0 )). attr ('src', imgFirst); $ ('img. page-prev ', panel ). bind ('click', selectPage (currPage-1 )). attr ('src', imgPrev); $ ('img. page-next ', panel ). bind ('click', selectPage (currPage + 1 )). attr ('src', imgNext); $ ('img. page-last ', panel ). bind ('click', selectPage (numPages ()-1 )). attr ('src', imgLast); $ ('input. page-num', panel ). val (currPage + 1 ). change (function () {selectPage ($ (this ). val ()-1) () ;}) ;}var currPage = 0; var panel =$ (this); render ();});}

The following is a test:

Run the following command:

The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

 

 
  
Transformation Method of Jquery paging plug-in (server-side paging)
 
  
Sharing carefully selected 12 excellent jQuery Ajax paging plug-ins and tutorials
 
  
Asp.net jquery (jquery. pagination. js)
 
  
JQuery Pagination Ajax paging plug-in (no refreshing or delay during paging switching)
 
  
Jquery paging plug-in AmSetPager (self-write)
 
  
Pagination plug-in jqPagination for jQuery plug-in sharing
 
  
Share a self-written jQuery paging plug-in
 
  
Pagination plug-in based on bootstrap3 and jquery
 
  
Jquery Pagination
 
  
Use JQuery to implement paging plug-in sharing