关于自己写分页的问题

   最近做项目由于数据太多一次性传输，加载很慢，所以做了一个分页功能来分批获取数据，下面是关于分页功能的问题（额，之前工作这么就除了学习那会写过分页，其它都是使用相关的前端插件还没真正的写过一个分页）。写分页可以有两种形式的，一种是在通过前端传入的数字使用SQL每次换页需要与服务器交换数据 ，一种是一次性的把所有数据取出来然后存在客户端然后在客户端控制，这两种形式主要是SQL不同需要与服务器交互的次数不同，还有单次传的数据量不同，这个你可以根据自己的需求选择不同的方式。

下面是两种不同形式的实现代码：

/改变一页记录数
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传输的数据 然后把数据存在一个数组里面  通过遍历控制显示的记录数

转载于:https://my.oschina.net/u/3037878/blog/995570