当前位置: 代码迷 >> Web前端 >> jQuery插件PagedTable兑现表格分页
  详细解决方案

jQuery插件PagedTable兑现表格分页

热度:101   发布时间:2012-11-16 14:12:14.0
jQuery插件PagedTable实现表格分页
一、插件地址: http://plugins.jquery.com/project/pagedtable

二、导入jQuery和插件:
     <script src="jquery-1.4.2.js" type="text/javascript">  </script>
     <script src="pagedtable.js"   type="text/javascript">  </script>

三、html部分
               <%
List cusList = service.findAllCustomer();
Iterator iter = cusList.iterator();

%>

<h2>  客户信息列表  </h2>
   <table id="table" border="1" width="60%">
  
     <tr>
     <td>编 号</td>  <td>姓 名</td>  <td>地 址</td>
     </tr>
    
     <%
       while(iter.hasNext()) {
           Customer cus = (Customer)iter.next();
     %>
    <tr> 
        <td><%=cus.getC_id() %></td> <td> <%=cus.getC_name() %> </td> <td> <%=cus.getC_address() %> </td>
     </tr>
    
     <%
     }
     %>
  
   </table>
四、JavaScript部分:
         <script type="text/javascript">
   $(document).ready(function(){
     $("table").pageable();
});
   </script>

五、设置:
    通过改变pagedtable.js进行设置,代码如下:
    ......
    var defaults = {
        limit: 5,
        pagelimit: 10,
        started: 1,
        insertpager: true,
        dragpager: true,
        fixedwidth: true,
        pager: '<p class="pager"></p>',
        page: '<a href="#"></a>',
        prev: '<a href="#">&laquo;</a>',
        next: '<a href="#">&raquo;</a>',
        selectedclass: 'selected'
    };
    ......
    limit代表每页显示多少条记录,默认值是5
    pagelimit代表每页面显示多少页,默认值是10
    start代表默认的起始页面的位置,默认是1
    ......
   
   源码见附件





1 楼 tianlihu 2010-10-26  
有三个问题要问:
1. 按你这个控件的原理,它是先生成HTML,然后再根据HTML来分页?
2. 设置不能动态在可用的地方修改,只能默认设置好?
3. 如果一页有两个表格,第一个表格想每页5条数据,第二个表格每页10条数据,怎么实现?
2 楼 shenrd666888 2010-10-27  
老兄 你这是前台分页吧,有支持后台分页的代码不? 能否共享一下 谢谢!
  相关解决方案