有个查询页面，查询的数据是表格展示，ajax查询后append出来的表格，然后怎么给他们做分页？
$.ajax({
url: "/event/eventFindHis.do",
type: "post",
dataType: "json",
async:false,
data: {
"id": eventId,
"customer_name": customer_name,
"customer_tel": customer_tel,
"title": title,
"acceptance_group": acceptance_group,
"handle_person": handle_person,
"state": state,
"status_reasons": status_reasons
},
success: function (result) { //status=1代表账号不存在0代表密码错误2代表登录成功
var data = result.data;
for (var i = 0; i < data.length; i++) {
var id = data[i].eventId;
var trs = '';
trs += '<tr>';
trs += '<td><a id="'+data[i].id+'" href="javascript:void(0)" class="Inquiry_btn" onclick=view(this)>'+data[i].id+'</a></td>' ; //
trs += '<td>' + data[i].title + '</td>';
trs += '<td>' + data[i].event_type + '</td>'; //
trs += '<td>' + data[i].submit_time + '</td>'; //
trs += '<td>' + data[i].accept_group + '</td>';
trs += '<td>' + data[i].operator_person + '</td>';
trs += '<td>' + data[i].state + '</td>';
trs += '</tr>';
$("#jg").append(trs);
}
// var num=$("#jg").children().length;它原先的是itable.row但是抓取不到对象
// alert("num="+num);
//-----------------------------------
var itable = document.getElementById("jg");
var num= data.length;
// var num = "7";//表格所有行数(所有记录数)
var totalPage = 0;//总页数
var pageSize = "10";//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = "1";//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
var endRow = currentPage * pageSize;//结束显示的行 40
endRow = (endRow > num)? num : endRow;
console.log(endRow);
//遍历显示数据实现分页
for(var i=1;i<(num+1);i++){
var irow =$("#jg").children()[i-1];
if(i>=startRow && i<=endRow){
irow.style.display = "block";
}else{
irow.style.display = "none";
}
}
var pageEnd = document.getElementById("pageEnd");
// alert("pageEnd="+pageEnd);
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
// alert("tempStr="+tempStr);
// alert("num="+num+"totalPage="+totalPage+"currentPage="+currentPage);
if(currentPage>1){
tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
}else{
tempStr += "首页";
tempStr += "<上一页";
}
if(currentPage<totalPage){
tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
}else{
tempStr += "下一页>";
tempStr += "尾页";
}
document.getElementById("barcon").innerHTML = tempStr;
},
error: function () {
alert("无数据");
}
});
}
这个是我网上找的方法，没效果，应该怎么写？
onClick=\"goPage("+(totalPage)+","+psize+")\ 你有没有写这些跳转的方法呢？ 其次效果什么的 你有没有开f12开发者工具调试一下 看下是什么情况呢？
建议在SQL语句中就分页 ,EasyUI的比较简单
大概思路：
1、创建Ajax向后台拿取数据的方法，绑定前台table,需要有参数，每页显示条数，当前页
2、再用一个函数创建分页，需要有参数，数据总数，当前页数，每页显示条数
3、分页函数判断显示分页的样式效果，并为每页增加点击事件调用读取数据函数，
4、后台方法要返回当前页数据和总数据数
通常的分页效果是：
服务器有1w条数据，假设30条未一页，通常我们请求的时候，会附带一个page（页码），还有size（30条），发送到后台，后台根据页码还有条数，
查询到第page页的总共30条信息（实际上是第page * 30开始的共30条的信息），同时，服务器还会返回一个总页码。比如10000/30=334页，
然后判断下当前页码与总页码的关系（这点看具体情况）
希望能帮到你
你这个没效果，是表格内容显示出来，还是分页条点击没有效果,还是查询数据就出问题了？
最怕的就是，这种表达不清晰的问题。
客户端分页吗？可以用jquery.pagination.js来分页，不用自己写，服务器端也可以，有回调得到当前页，自己请求服务器获取数据
http://www.jq22.com/jquery-info5697
<link href="http://www.jq22.com/demo/pagination20160204/style/pagination.css" rel="stylesheet" type="text/css">
<script src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.jq22.com/demo/pagination20160204/script/jquery.pagination.js"></script>
<table id="jg" border="1"></table>
<div id="pg" class="M-box"></div>
<script>
data = []
for (var i = 0; i < 50; i++) data.push({})
var pagesize = 15, totalrecord = data.length;
for (var i = 0; i < totalrecord; i++) {
var id = data[i].eventId;
var trs = '';
trs += '<tr' + (i >= pagesize ? ' style="display:none"' : '') + '>';//大于显示的条数隐藏起来
trs += '<td>'+i+'</td>';////测试用的td，自己注意删除
trs += '<td><a id="' + data[i].id + '" href="javascript:void(0)" class="Inquiry_btn" onclick=view(this)>' + data[i].id + '</a></td>'; //
trs += '<td>' + data[i].title + '</td>';
trs += '<td>' + data[i].event_type + '</td>'; //
trs += '<td>' + data[i].submit_time + '</td>'; //
trs += '<td>' + data[i].accept_group + '</td>';
trs += '<td>' + data[i].operator_person + '</td>';
trs += '<td>' + data[i].state + '</td>';
trs += '</tr>';
$("#jg").append(trs);
}
$('#pg').pagination({
totalData:totalrecord,
showData: pagesize,
coping: true,
homePage: '首页',
endPage: '末页',
prevContent: '上页',
nextContent: '下页',
callback: function (that) {
var current = that.getCurrent() - 1;//返回的页数从1开始
$("#jg").find('tr').hide().filter(':gt(' + (current * pagesize - 1) + ')').filter(':lt(' + (pagesize) + ')').show()
//从服务器端获取数据自己这里改ajax获取，传递current参数获取要的页数据
}
});
</script>
分页一般是后端拿数据的时候分吧，这样可以减少传入数据的量
这么写代码不累吗，现成的表格框架不用？bootstrap table用起来就可以不用再在前端耗费那么多时间了