關於本身寫分頁的問題

   最近作項目因爲數據太多一次性傳輸，加載很慢，因此作了一個分頁功能來分批獲取數據，下面是關於分頁功能的問題（額，以前工做這麼就除了學習那會寫過度頁，其它都是使用相關的前端插件還沒真正的寫過一個分頁）。寫分頁能夠有兩種形式的，一種是在經過前端傳入的數字使用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傳輸的數據 而後把數據存在一個數組裏面  經過遍歷控制顯示的記錄數