最近作项目因为数据太多一次性传输,加载很慢,因此作了一个分页功能来分批获取数据,下面是关于分页功能的问题(额,以前工做这么就除了学习那会写过度页,其它都是使用相关的前端插件还没真正的写过一个分页)。写分页能够有两种形式的,一种是在经过前端传入的数字使用SQL每次换页须要与服务器交换数据 ,一种是一次性的把全部数据取出来而后存在客户端而后在客户端控制,这两种形式主要是SQL不一样须要与服务器交互的次数不一样,还有单次传的数据量不一样,这个你能够根据本身的需求选择不一样的方式。前端
下面是两种不一样形式的实现代码:ajax
/改变一页记录数 var startPage=0; var endPage=10; function pageNumber(){ var number=parseInt($("#selectPage").val()); var pageNumber=1; $("#pageNumber").attr("value",pageNumber); $("#pageNumber").val(pageNumber); startPage=0; endPage=startPage+number; pagingData(); } //改变页数 function pageJump(){ var number=parseInt($("#selectPage").val()); var pageNumber=parseInt($("#pageNumber").val()); $("#pageNumber").attr("value",$("#pageNumber").val()); if(!isNaN(pageNumber)){ startPage=number*pageNumber; endPage=startPage+number; pagingData(); }else{ $.ligerDialog.error('输入值不是数字'); } } //下一页 function pageDown(){ var number=parseInt($("#selectPage").val()); var pageNumber=parseInt($("#pageNumber").val())+1; $("#pageNumber").attr("value",pageNumber); $("#pageNumber").val(pageNumber); startPage=startPage+number; endPage=endPage+number; pagingData(); } //上一页 function pageUp(){ var number=parseInt($("#selectPage").val()); if(startPage<number){ $.ligerDialog.error('该页为第一页'); return; }else{ var pageNumber=parseInt($("#pageNumber").val())-1; $("#pageNumber").attr("value",pageNumber); $("#pageNumber").val(pageNumber); startPage=startPage-number; endPage=endPage-number; } pagingData(); } //分页得到数据 function pagingData(){ var number=parseInt($("#selectPage").val()); $.ajax({ type : 'post', data : {formid : owner,startPage:startPage,endPage:endPage}, dataType : 'json', url : '../../../../system/gooFlowAction_getForm.do', success : function(sdata){ seldata = sdata; if(seldata.data.length!=0){ $("#select1").empty(); for (var i = 0; i < seldata.data.length; i++) { $("#select1")[0].options.add(new Option(seldata.data[i].name, seldata.data[i].id)); } }else{ var pageNumber=parseInt($("#pageNumber").val())-1; $("#pageNumber").attr("value",pageNumber); $("#pageNumber").val(pageNumber); startPage=startPage-number; endPage=endPage-number; $.ligerDialog.error('没有下一页了'); return; } }, error:function(){ $.ligerDialog.error('获取数据失败'); } }); } jsp部分 <div style="border:1px solid"> <ul style="font-size: 12px"> <li class="thePageNumber" style="float:left"> <select id="selectPage" style="height:25px;width:50px;font-size: 12px" onchange="pageNumber()"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> </select> </li> <li id="pageUp" style="float:left" onclick="pageUp()">上一页</li> <li style="float:left">第<input id="pageNumber" type="text" style="height:25px;width:50px;font-size: 12px" value="1" onchange="pageJump()"/>页</li> <li id="pageDown" style="float:left" onclick="pageDown()">下一页</li> </ul> </div>
上面是屡次交互的 单次交互修改下AJAX传输的数据 而后把数据存在一个数组里面 经过遍历控制显示的记录数json