jquery 插件QuickPaginate快速分页

来源:互联网 发布:霍普金斯 知乎 编辑:程序博客网 时间:2024/06/04 00:25

使用说明
一,需要jQuery库文件和QuickPaginate库文件
二,可自定义分页CSS显示效果,如:qp_prev和qp_next

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="generator" content="Editplus4PHP" />    <meta name="keywords" content="Leo, HentStudio, Editplus4PHP, LeoPHP" />    <meta name="description" content="LeoPHP - Powered by HentStduio" />    <meta name="author" content="Leo" />    <link rel="shortcut icon" href="images/favicon.ico" />    <title>Example | xHTML1.0</title>    <script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>   <script src="js/jquery.quickpaginate.packed.js" type="text/javascript" charset="utf-8"></script>       <!-- <script src="js/jquery.quickpaginate.js" type="text/javascript" charset="utf-8"></script> --><script type="text/javascript" charset="utf-8">    $(function(){        $("#new_list tr").quickpaginate({ perpage: 2,  pager : $("#new_counter") });    });        </script></head><body><div style="display:block;"><table border="1"><!--table 开始-->  <thead>    <tr>      <th>A</th>      <th>B</th>      <th>C</th>      <th>D</th>    </tr>  </thead>  <tbody id="new_list">          <tr>                     <td>A1</td>        <td>B1</td>        <td>C1</td>        <td>D1</td>              </tr>      <tr>                     <td>A2</td>        <td>B2</td>        <td>C2</td>        <td>D2</td>              </tr>      <tr>                     <td>A3</td>        <td>B3</td>        <td>C3</td>        <td>D3</td>              </tr>      <tr>                     <td>A4</td>        <td>B4</td>        <td>C4</td>        <td>D4</td>              </tr>      <tr>                     <td>A5</td>        <td>B5</td>        <td>C5</td>        <td>D5</td>              </tr>        </tbody></table><div id="new_counter"></div></div><hr /><hr /><script type="text/javascript"><!--    $(function(){$("#images img").quickpaginate({ perpage: 1, showcounter: true, pager : $("#images_counter") });});//--></script><div id="images"><img src="images/demo1.gif" width="200" height="133" alt="Demo1" /><img src="images/demo2.jpg" width="200" height="133" alt="Demo2" /><img src="images/demo3.gif" width="200" height="133" alt="Demo3" /></div><div id="images_counter"></div></body></html>

 

jQuery插件QuickPaginate参数详解
perpage表示每页显示数,默认值为6,如上文本实例每页显示2个
pager表示QuickPaginate生成分页HTML代码显示的对象,默认为null,如上:$("#new_list")
showcounter表示是否显示统计,默认为true
prev表示上一页CSS样式名,默认为qp_next,具体请看QuickPaginate生成的代码图
next表示下一页CSS样式名,默认为qp_prev
pagenumber表示当前页CSS样式名,默认为qp_pagenumber
totalnumber表示总页数CSS样式名,默认为qp_totalnumber
counter表示统计CSS样式名,默认为qp_counter

jquery quickpaginate分页demo