Web之page分頁表格數據

本篇博文重點講述在Web開發中，用Page分頁把所有數據進行分頁展示，這種需求在如今很普遍，如：總數爲：50，那麼每頁顯示10條，分5頁；

實現步驟分爲如下：
1，創建表格數據html；
2，CSS相關樣式；
3，導入JQ文件包，如：<script src="js/jquery-1.10.2.min.js"></script>。
4，邏輯數據的編寫，以及服務器的數據列表獲取。
5，實現總數，分頁，跳轉，顯示功能；

代碼如下所示：
一：HTML代碼：

            <table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">
				<thead>
				<tr>
				<td colspan="3" height="33" class="td0"> </td>
				<td align="center" class="td2">	
					  <!--<div class="compose-btn pull-right" style="margin-right: 20px;">-->
			          <a class="btn  btn-success" onclick="Add_date();" id="btn_add" style="background-color: #BE2626;border: solid; 0px"> Add Mail</a>
				      <!--  </div>-->
					  </td>
					  </tr>
					  <tr align="center">
						<th width="150" height="33" class="td2" style="text-align: center;">序號</th>
						<th width="150" class="td2" style="text-align: center;">用戶名</th>
						<th width="350" class="td2" style="text-align: center;">地址</th>
						<th width="250" class="td2" style="text-align: center;"></th>
					</tr>
				</thead>
					<tbody id="adminTbody">
						
					
					</tbody>
			</table>
			<div id="barcon" class="barcon" >
				<div id="barcon1" class="barcon1"></div>
					<div id="barcon2" class="barcon2">
						<ul>
							<li><a href="###" id="firstPage">首頁</a></li>
							<li><a href="###" id="prePage">上一頁</a></li>
							<li><a href="###" id="nextPage">下一頁</a></li>
							<li><a href="###" id="lastPage">尾頁</a></li>
							<li>
								<select id="jumpWhere"></select>
							</li>
							<li><a href="###" id="jumpPage" onclick="jumpPage()">跳轉</a></li>
						</ul>
					</div>
			</div>

二：CSS代碼：

<style type="text/css">
  
   	 a{
		text-decoration: none;
	}
	
	.table2{
		border:#C8C8C8 solid;   
		border-width:1px 0px 0px 1px; 
		background: #F3F0F0;
		margin-top:25px;
	}
	
	.td0{
    	border:#C8C8C8 solid;  
		border-width:0 0 1px 0;
	}
	
	.td2{
    	border:#C8C8C8 solid;   
		border-width:0 1px 1px 0 ;
	}
	
	.barcon {
		width: 1000px;
		margin: 0 auto;
		text-align: center;
     }
 
	.barcon1 {
	    font-size: 17px;
	    float: left;
	    margin-top: 20px;
	    margin-left: 23px;
	    font-family: garamond;
	}
 
	.barcon2 {
		float: right;
	}
 
	.barcon2 ul {
    	margin: 20px 22px;
    	padding-left: 0;
    	list-style: none;
    	text-align: center;
	}
 
	.barcon2 li {
    	display: inline;
	}
 
	.barcon2 a {
		font-size: 16px;
		font-weight: normal;
		display: inline-block;
		padding: 5px;
		padding-top: 0;
		color: black;
		border: 1px solid #ddd;
		background-color: #fff;
	}
 
	.barcon2 a:hover{
		background-color: #eee;
	}
 
	.ban {
    	opacity: .4;
	}
	.btn{
		
		padding: 5px;
		color: #FFFFFF;
		border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;

	}
 </style>

三：動態獲取服務器列表，並展示到表格之上；

				var carlist;
				var  dateg = {"userid":"1"};
				$.ajax({
				    //請求方式
				type:'POST',
				//async: true,
				//發送請求的地址
				url:obj.serUrl+'company/getAllCompany',
				//服務器返回的數據類型
				dataType:'json',
				//jsonp: "callback",
				   // timeout:1000,//超時時間設置爲10秒；  
				headers:{'Content-Type':'application/json'}, 
				//發送到服務器的數據，對象必須爲key/value的格式，jquery會自動轉換爲字符串格式
				    data:JSON.stringify(dateg),
				    success:function(data){
				   // console.log(data.data);
				var divs = '';
				document.getElementById('adminTbody').innerHTML="";
				    carlist = data.data;
				    console.log(carlist);
				    	for(var b=0;b<carlist.length;b++){
							var clist = carlist[b];
							console.log(clist);
							divs+='<tr align="center">';
							divs+='<td class="td2" height="33" width="150">'+clist.companyid+'</td>';
							divs+='<td class="td2" >'+clist.companyname+'</td>';
							divs+='<td class="td2" >'+clist.address+'</td>';
							divs+='<td class="td2" >';
							divs+='<a class="btn  btn-success" id="btn_Edit" style="background-color: #BE2626;border: solid; 0px" onclick=\'opurl('+b+');\'> Edit </a>';
							divs+='<a class="btn  btn-success" id="btn_delete" style="background-color: #BE2626;border: solid; 0px" onclick=\'Delete_opurl('+b+');\'> Delete </a>';
							divs+='</td>';
							divs+='</tr>';
				 }
				 localStorage.inthelloac=clist.companyid;
				 document.getElementById('adminTbody').innerHTML += divs;
							 goPage(1,10);
				
					   }    
				});

四：獲取到列表信息了，也展示出來了，接下來就是，寫總數/分頁/跳轉，如下：

function dynamicAddUser(num){
			for(var i=1;i<=num;i++)
			{
					var trNode=document.createElement("tr");
					$(trNode).attr("align","center");
					//序號
					var tdNodeNum=document.createElement("td");
					$(tdNodeNum).html(i+1);
					tdNodeNum.style.width = "150px";
					tdNodeNum.style.height = "33px";
					tdNodeNum.className = "td2";
					//用戶名
					var tdNodeName=document.createElement("td");
					$(tdNodeName).html("lzj"+i);
					tdNodeName.style.width = "300px";
					tdNodeName.className = "td2";
					//權限			
					var tdNodePri=document.createElement("td");
					tdNodePri.style.width = "250px";
					tdNodePri.className = "td2";
					var priText=document.createElement("span");
					$(priText).css({"display":"inline-block","text-align":"center"});
					$(priText).text("普通用戶");
					tdNodePri.appendChild(priText);
					//操作
					var tdNodeOper = document.createElement("td");
					tdNodeOper.style.width = "170px";
					tdNodeOper.className = "td2";
					var editA = document.createElement("a");
					$(editA).attr("href", "###").text("編輯");
					$(editA).css({ display: "inline-block" });
					tdNodeOper.appendChild(editA);
		 
					trNode.appendChild(tdNodeNum);
					trNode.appendChild(tdNodeName);
					trNode.appendChild(tdNodePri);
					trNode.appendChild(tdNodeOper);
					$("#adminTbody")[0].appendChild(trNode);
			}
		}

/**
 * 分頁函數
 * pno--頁數
 * psize--每頁顯示記錄數
 * 分頁部分是從真實數據行開始，因而存在加減某個常數，以確定真正的記錄數
 * 純js分頁實質是數據行全部加載，通過是否顯示屬性完成分頁功能
**/
var pageSize=0;//每頁顯示行數
var currentPage_=1;//當前頁全局變量，用於跳轉時判斷是否在相同頁，在就不跳，否則跳轉。
var totalPage;//總頁數
function goPage(pno,psize){
    var itable = document.getElementById("adminTbody");
    var num = itable.rows.length;//表格所有行數(所有記錄數)
     pageSize = psize;//每頁顯示行數
    //總共分幾頁 
    if(num/pageSize > parseInt(num/pageSize)){   
            totalPage=parseInt(num/pageSize)+1;   
       }else{   
           totalPage=parseInt(num/pageSize);   
       }   
    var currentPage = pno;//當前頁數
	 currentPage_=currentPage;
    var startRow = (currentPage - 1) * pageSize+1; 
    var endRow = currentPage * pageSize;
        endRow = (endRow > num)? num : endRow;    
       //遍歷顯示數據實現分頁
//  for(var i=1;i<(num+1);i++){    
//      var irow = itable.rows[i-1];
//      if(i>=startRow && i<=endRow){
//          irow.style.display = "";    
//      }else{
//          irow.style.display = "none";
//      }
//  }
 
	$("#adminTbody tr").hide();
	for(var i=startRow-1;i<endRow;i++)
	{
		$("#adminTbody tr").eq(i).show();
	}
    var tempStr = "共"+num+"條記錄 分"+totalPage+"頁 當前第"+currentPage+"頁";
	 document.getElementById("barcon1").innerHTML = tempStr;
	 
    if(currentPage>1){
		$("#firstPage").on("click",function(){
			goPage(1,psize);
		}).removeClass("ban");
		$("#prePage").on("click",function(){
			goPage(currentPage-1,psize);
		}).removeClass("ban");   
    }else{
		$("#firstPage").off("click").addClass("ban");
		$("#prePage").off("click").addClass("ban");  
    }
 
    if(currentPage<totalPage){
		$("#nextPage").on("click",function(){
			goPage(currentPage+1,psize);
		}).removeClass("ban")
		$("#lastPage").on("click",function(){
			goPage(totalPage,psize);
		}).removeClass("ban")
    }else{
		$("#nextPage").off("click").addClass("ban");
		$("#lastPage").off("click").addClass("ban");
    }   
	
	$("#jumpWhere").val(currentPage);
	
}
 
 
	function jumpPage()
	{
		var num=parseInt($("#jumpWhere").val());
		console.log("121__"+num);
		if(num!=currentPage_)
		{
			goPage(num,pageSize);
		}
	}
	
	$(function(){
	dynamicAddUser(localStorage.inthelloac);
	goPage(1,10);
	var tempOption="";
	var isint = "1";
	for(var i=1;i<=totalPage-1;i++)
	{
		tempOption+='<option value='+i+'>'+i+'</option>'
	}
	$("#jumpWhere").html(tempOption);
})

五：具體的邏輯思路如上所示，動態獲取服務器列表數據，通過page分頁進行展示，從而使得界面以及程序更加美觀，邏輯更加井井有條，客戶也極爲需求，因此，相信這種功能不太難，初學者細心看一下就會明白，如有不懂或哪裏不對之處，歡迎留言，謝謝~ Goodbaye ，再附上一張圖…