limit实现的分页查询

背景：原先是一次性查询加载到前段，表格插件自动分页，最近查询的数据量越来越大，长的时候需要等好几十秒，决定自己写一个后端分页，我写的和网上大神的略有不同，不是后端写一个类封装分页的参数，每次查询都是穿当前页码和查询行数，详见下文：

步骤：

首先实习分页，思路要理清，其实分页很简单，实习方式也有很多种，首先几个参数是必须的

后端需要的参数:

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">&nbsp;</span>
	<span class="prev_1">&nbsp;</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">&nbsp;</span>
	<span class="last_1">&nbsp;</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;
}