背景：原先是一次性查询加载到前段，表格插件自动分页，最近查询的数据量越来越大，长的时候需要等好几十秒，决定自己写一个后端分页，我写的和网上大神的略有不同，不是后端写一个类封装分页的参数，每次查询都是穿当前页码和查询行数，详见下文：
步骤：
首先实习分页，思路要理清，其实分页很简单，实习方式也有很多种，首先几个参数是必须的
后端需要的参数:
1：当前查询的页数
2：每页显示的行数
前端需要的参数：
总行数
一：前端修改：
前端我用的是原始的html标签构成几个基本的分页功能，再绑定具体的点击事件，改变事件
<style>
.dss_table_page{margin:0;padding:0;font-family:"Microsoft YaHei",Verdana;font-size:12px;height:30px;line-height:30px;width:100%;user-select: none;-ms-user-select: none;vertical-align:middle;border-top:solid 1px #ccc;margin-top:-1px;}
.dss_table_page div.dss_table_page_oper{width:320px;float:left;margin-left:10px;margin-top:3px;padding:0px;}
.dss_table_page div.dss_table_page_oper span{display:inline-block;margin:0 5px 0 0;padding:0px 6px;line-height:20px;height:20px;border:1px solid #e1e1e1;background:#fff;color:#333;text-decoration:none;cursor:pointer}
.dss_table_page div.dss_table_page_oper span.first_1{background-image:url('../../themes/lightblue/jqgrid/images/left1_a.png');background-repeat:no-repeat;background-position:center center}
.dss_table_page div.dss_table_page_oper span.prev_1{background-image:url('../../themes/lightblue/jqgrid/images/left2_a.png');background-repeat:no-repeat;background-position:center center}
.dss_table_page div.dss_table_page_oper span.next_1{background-image:url('../../themes/lightblue/jqgrid/images/right2_a.png');background-repeat:no-repeat;background-position:center center}
.dss_table_page div.dss_table_page_oper span.last_1{background-image:url('../../themes/lightblue/jqgrid/images/right1_a.png');background-repeat:no-repeat;background-position:center center}
.dss_table_page div.dss_table_page_oper span input{width:30px;height:17px;border:1px solid #e1e1e1;line-height:16px;margin-top:1px;}
.dss_table_page div.dss_table_page_oper span select{width:50px;height:22px;border:1px solid #e1e1e1;line-height:22px}
.dss_table_page div.dss_table_page_oper span.none{border:0px}
.dss_table_page span.sum{float:right;margin-right:10px}
</style>
<div id="report_0tp" role="w" class="dss_table_page">
<div class="dss_table_page_oper">
<span class="first_1"> </span>
<span class="prev_1"> </span>
<span class="none" id="countpage"><input id="curpage" type="text" value="1">
<a style="text-decoration:none;color:black" id="addcount"><a></span>
<span class="next_1"> </span>
<span class="last_1"> </span>
<span class="none">
<select id="displayrow">
<option value="20" selected="selected">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select></span>
</div>
<span class="sum" id="countrow"></span></div>
效果：
js写了一个方法，用来获取总页数和总条数，初始化分页信息，记住，三个时机调用这个方法，一是页面初始化的时候，二是每次查询的时候，三是改变那个每页显示的条数的下拉框数值的时候
initpaging: function () {
//获取总行数
$.ajax({
url: dss.rootPath + "plugin/sjwfx/getPortUAPCount",
data: {},
async: false,
beforeSend: function () {
dss.load(true);//开始“数据正在加载”的进度条
},
complete: function () {
dss.load(false);//隐藏“数据正在加载”的进度条
},
success: function (data) {
var datacont = data.data.rows[0].cells[0];
parame.datacont=datacont;
}
});
//设置总计多少行
$("#countrow").text("共"+parame.datacont+"条");
//获取每页显示行数的值，默认是20
var opt = $("#displayrow option:selected").text();
//设置共多少页数
var yeshu = parame.datacont/opt+1;
yeshu = Math.floor(yeshu);
parame.yeshu=yeshu;
$("#addcount").text("共"+yeshu+"页");
}
这个地方有几个坑，记住别踩：
1：页面写HTML标签时候，默认就是当前第一页，每页查询20条数据
2：ajax请求数据不要异步的，async: false,，至于为什么这么做，因为我的后台没有传参，用的是上次数据查询的参数，如果是异步的，那么我的分页初始化的方法不会等到ajax执行完，那么参数分页之后显示的参数就是NAN
3：几个按钮的作用和需要控制的东西，一定要弄清，一共6个事件，四个点击事件，分别跳到第一页，最后一页，上一页，下一页，2个改变事件，改变当前页，改变每页显示的条数，具体看代码
//绑定四个小按钮的点击事件
$(".first_1").click(function(){
//获取当前页数
var pagenum = $("#curpage").val()+1;
$("#curpage").val(1);
method.getDetailed();
//alert("跳到首页");
});
$(".prev_1").click(function(){
//获取当前页数
var pagenum = $("#curpage").val()-1;
if(pagenum<1){
$("#curpage").val(1);
method.getDetailed();
}else{
$("#curpage").val(pagenum);
method.getDetailed();
}
//alert("跳到上一页");
});
$(".next_1").click(function(){
//获取当前页数
var pagenum = $("#curpage").val();
pagenum = parseInt(pagenum)+1;
if(pagenum>parame.yeshu){
$("#curpage").val(parame.yeshu);
method.getDetailed();
}else{
$("#curpage").val(pagenum);
method.getDetailed();
}
//alert("跳到下一页");
});
$(".last_1").click(function(){
$("#curpage").val(parame.yeshu);
method.getDetailed();
//alert("跳到最后一页");
});
//绑定下拉框的改变事件
$("#displayrow").change(function(){
var opt2 = $("select option:selected").text();
method.getDetailed();
method.initpaging();
});
$("#curpage").change(function(){
var cur = $("#curpage").val();
if(cur<1 || cur>parame.yeshu){
alert("请选择合适范围的页数");
}else{
method.getDetailed();
}
//alert("跳到指定的页码");
});
二：后端修改：
后端做的比较简单，只要获取当前总页数，然后limit穿入当前页码和每页显示的行，我的思路是先让数据查询第一页，然后将传入的参数保存在当前类当中，不要limit分页的参数，然后宁外一个方法用这些参数 count(*)查询总行数返回，主要的逻辑还是在前段，后端只多做了一个返回总行数，查询数据加了一个limit。
if(opt.length()>0 && !"".equals(opt) && pagenum.length()>0 && !"".equals(pagenum)){
int opt2 = Integer.valueOf(opt);
int pagenum2 = Integer.valueOf(pagenum);
sql+=" limit "+opt2*pagenum2+","+opt2;
}