最近用easyUi做了一个项目，觉得其中datagrid分页功能着实让人眼前一亮：分页框点击一个向右或向右箭头的图片就会自动传rows与page参数到后台。
现在我就用html加jquery 的方式做一个类似的功能，主要还是递归函数调用吧。
话不多说直接上代码。
前段 js与html如下：
<script type="text/javascript">
$(function(){
InitData(1);
ClickPage();
$("a:contains('首页')").hide();
$("a:contains('上一页')").hide();
});
function InitData(pageIndex){
$.ajax({
url:'ListMaterialServlet',
data:{"pageIndex":pageIndex},
success:function(data){
var dataObj=JSON.parse(data);
var totals= dataObj[0].totals;
var pageIndex=dataObj[1].pageIndex;
$("#pageIndex").text(pageIndex);
if(pageIndex>1){
$("a:contains('首页')").show();
$("a:contains('上一页')").show();
}
$("a:contains('上一页')").attr("id",pageIndex-1);
$("a:contains('下一页')").attr("id",pageIndex+1);
$("#totals").text(totals);
//console.info(dataObj[2].Material[0].mateName);
$("#t1").empty();
for(var i=0;i<dataObj[2].Material.length;i++){
$tr=$("<tr><td>"+dataObj[2].Material[i].mateName+"</td>"+
"<td>"+dataObj[2].Material[i].price+"</td>"+
"<td>"+dataObj[2].Material[i].cycle1+"</td>"+
"<td>"+dataObj[2].Material[i].cycle2+"</td>"+
"<td>"+dataObj[2].Material[i].is_Active+"</td>"+
"<td><a href='javascript:void(0)' id='"+dataObj[2].Material[i].mateId+"' >删除</a> <a href='javascript:void(0)' id='"+dataObj[2].Material[i].mateId+"' >修改</a></td></tr>");
$("#t1").append($tr);
}
ClickUpdate();
}
});
}
function ClickUpdate(){
$("a:contains('删除')").click(function(){
$(this).parent().parent().hide(2000,function(data){
InitData();
});
});
}
function ClickPage(){
$("a:contains('首页')").click(function(){
var pageFrist=1;
InitData(1);
});
$("a:contains('上一页')").click(function(){
var pageLast= $(this).attr("id");
InitData(pageLast);
});
$("a:contains('下一页')").click(function(){
var pageNext= $(this).attr("id");
InitData(pageNext);
});
$("button:contains('跳转')").click(function(){
var pageTiaozhuan=$("#pageTiaozhuan").val();
InitData(pageTiaozhuan);
});
}
</script>
</head>
<body>
<table align="center" class="imagetable" >
<tr>
<th>物料名称</th><th>价格</th><th>周期一</th><th>周期二</th><th>是否激活</th><th>操作</th>
</tr>
<tbody id="t1">
</tbody>
</table>
<center>
<a href="javascript:void(0)" >首页</a>
<a href="javascript:void(0)" >上一页</a>
<a href="javascript:void(0)">下一页</a>
<input id="pageTiaozhuan" style="width:40px;" ><button>跳转</button>
当前是<span style="color:red" id="pageIndex"></span>页 总共<span id="totals"></span>条记录
</center>
</body>
</html>
后端servlet：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
int pageIndex=Integer.parseInt(request.getParameter("pageIndex")==null?"1":request.getParameter("pageIndex"));
MaterialInterface mi=new MaterialImpl();
System.out.println(pageIndex);
List<Material> Materials= mi.ListMaterial(20, pageIndex);
JSONArray jsonArray=JSONArray.fromObject(Materials);
int totals=mi.Totals();
//[{"totals":30页},{"pageIndex":pageIndex},{"Material":}]
String JsonArray=" [{\"totals\":"+totals+"},{\"pageIndex\":"+pageIndex+"},{\"Material\":"+jsonArray.toString()+"}]";
response.getWriter().write(JsonArray.toString());
}
扫一扫
2030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
