This article describes in detail the preparation of paging plug-ins Based on jquery. If you are interested, you can refer to JQuery extension, compile a simple paging plug-in with a small amount of code. 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 ='
'+'
| '+'
| '+'
ThePage/total '+ numPages () +' page | '+'
| '+'
| '+'
| '+'
Retrieve '+ totalProperty +' records | '+'
'; 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: