jquery分页插件pagination 的运用

来源：互联网发布：围棋入门书籍推荐知乎编辑：程序博客网时间：2024/05/12 10:22

原项目地址：http://plugins.jquery.com/project/pagination

pagination 此jQuery插件为Ajax分页插件，一次性加载，故分页切换时无刷新与延迟，如果数据量较大不建议用此方法，因为加载会比较慢。
原插件CSS不太合理，使用浮动，故无法方便实现左右方向的定位，且未清除浮动。

参数

参数名描述参数值maxentries总条目数必选参数，整数items_per_page每页显示的条目数可选参数，默认是10num_display_entries连续分页主体部分显示的分页条目数可选参数，默认是10current_page当前选中的页面可选参数，默认是0，表示第1页num_edge_entries两侧显示的首尾分页的条目数可选参数，默认是0link_to分页的链接字符串，可选参数，默认是"#"prev_text“前一页”分页按钮上显示的文字字符串参数，可选，默认是"Prev"next_text“下一页”分页按钮上显示的文字字符串参数，可选，默认是"Next"ellipse_text省略的页数用什么文字表示可选字符串参数，默认是"..."prev_show_always是否显示“前一页”分页按钮布尔型，可选参数，默认为true，即显示“前一页”按钮next_show_always是否显示“下一页”分页按钮布尔型，可选参数，默认为true，即显示“下一页”按钮callback回调函数默认无执行效果，当点击链接的时候此函数被调用，此函数接受两个参数，新一页的id和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行

   <div>   <table id="linkTable" cellpadding="6" cellspacing="1" align="left" >   <thead>  <tr class="tableHeader" align="center"> <th style="width:200px; text-align:center;" > 产品名称 </th> <th style="width:200px; text-align:center"> 产品单价 </th>  </tr>   </thead>   </table>   </div>   <div id="Pagination" class="digg"></div> <script language="javascript" type="text/javascript">   $(document).ready(function() {  InitData(0); //初始化数据   });   //这个事件是在翻页时候用的   function pageselectCallback(page_id, jq) {  InitData(page_id);   }   function InitData(pageIndex) {   var tbody = ""; //声明表格中body部分   $.ajax({ //这里使用到Jquery的ajax方法  type: "POST",   dataType: "json",   url: 'GetData.do', //请求的处理数据   data: "pageIndex=" + (pageIndex + 1) ,   //传入的参数，第一个参数就是分页的页数，第二个参数为排序的依据   //下面的操作就是成功返回数据以后，进行数据的绑定   success: function(data) {   $("#linkTable tr:gt(0)").remove();   var myData = data.Products;   $.each(myData, function(i, n) {   var trs = "";   trs += "<tr><td align='center'>" + n.ProductName + "</td><td>" +   n.QuantityPerUnit + "</td></tr>";   tbody += trs;  });           $("#linkTable").append(tbody);          }      });   //加入分页的绑定 $("#Pagination").pagination(2, {   callback: pageselectCallback,   prev_text: '< 上一页',   next_text: '下一页 >',   items_per_page: 20,   num_display_entries: 6,   current_page: pageIndex,   num_edge_entries: 2 });   }</script>

jQuery Pagination分页插件

0 0