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:
JS Code
- $. 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;"> retrieve' + totalproperty + 'record </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:
HTML code
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
- <LINK rel = "stylesheet" href = "mypagination.css"/>
- <SCRIPT type = "text/JavaScript" src = "jquery-1.2.6.js"> </SCRIPT>
- <SCRIPT type = "text/JavaScript" src = "jquery. mypagination. js"> </SCRIPT>
- <SCRIPT>
- $ (Document). Ready (function (){
- $ ('# Mypage'). mypagination (10112 ,{
- Callback: function (PAGE ){
- Alert (PAGE );
- }
- });
- });
- </SCRIPT>
- </Head>
- <Div id = "mypage" class = "mypagination"> </div>
View Source House Network