一、插件地址: 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="#">«</a>',
next: '<a href="#">»</a>',
selectedclass: 'selected'
};
......
limit代表每页显示多少条记录,默认值是5
pagelimit代表每页面显示多少页,默认值是10
start代表默认的起始页面的位置,默认是1
......
源码见附件
1 楼
tianlihu
2010-10-26
有三个问题要问:
1. 按你这个控件的原理,它是先生成HTML,然后再根据HTML来分页?
2. 设置不能动态在可用的地方修改,只能默认设置好?
3. 如果一页有两个表格,第一个表格想每页5条数据,第二个表格每页10条数据,怎么实现?
1. 按你这个控件的原理,它是先生成HTML,然后再根据HTML来分页?
2. 设置不能动态在可用的地方修改,只能默认设置好?
3. 如果一页有两个表格,第一个表格想每页5条数据,第二个表格每页10条数据,怎么实现?
2 楼
shenrd666888
2010-10-27
老兄 你这是前台分页吧,有支持后台分页的代码不? 能否共享一下 谢谢!