有的時候頁面需要很多不同的表組成的數據，該怎麼分頁呢？使用資料庫分頁很簡單，那麼要如何使用js實作分頁呢？接下來，小編幫大家解決這個問題，需要的朋友一起來學習吧
先給大家貼效果圖：
 "153818595158066純javascript實作分頁(兩種方法)")
網路上確實有很多分頁的插件以及開源程式碼，單本是一個後台開發猿，前台css等樣式還駕馭不住，所以就開始自己去寫了。其實這個分頁原理很簡單，就是用ajax往後台傳值(目前頁碼)，後台使用limit進行分頁。
因為這是我自己第一次動手用js寫分頁，寫的應該也不是很完美，有些公共的沒有抽取出來，但是用起來還是可以的，這塊代碼是可以把它當做公共的分頁去處理的，我就是用
這塊程式碼寫了兩個稍微不一樣的分頁！公共的程式碼抽取的也差不多，主要就是ajax後台以及回傳的值不同而已，只要把總頁碼的值獲取到，點擊首頁/下一頁等傳值正確的話，基本上分頁是不會出什麼問題的
純js實作分頁方法一：
廢話不多說，直接上程式碼了！
註：本項目是全程使用js來寫的，前台的資料透過ajax進行獲取，然後再進行拼裝，動態載入到頁面。
1.先把上一頁，下一頁等的程式碼附上(裡面的值都是偽值，下面會在js裡進行重新賦值的！)
<ul class="page" id="page">
<li id="shouye" class="p-prev disabled">
<a href='javascript:indexpage(1);'>首 页</a>
</li>
<li id="shangyiye" class="p-prev disabled" >
<a href='javascript:indexpage(-1);'><i></i>上一页</a>
</li>
<li ><a id="one" href="javascript:void(0);" >1</a></li>
<li><a id="two" href="javascript:void(0);" >2</a></li>
<li><a id="three" href="javascript:void(0);" >3</a></li>
<li class="more"><a id="five" href="javascript:void(0);" >...</a></li>
<li><a id="fore" href="javascript:void(0);" >13855</a></li>
<li class='p-next'>
<a href='javascript:indexpage(-3);' onclick="jumpToPage('2','/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);">下一页<i></i></a>
</li>
<li id="weiye" class='p-next'>
<a href='javascript:void(0);' onclick="indexpage(0);">尾 页</a>
</li>
<li class="total">
<span id="span_number">共13855页 到第<input type="text" id="input_number" class="page-txtbox" />页
<input name="" value="确定" type="button" onclick="jumpToPage(jQuery('#input_number').val(),'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);" class="page-btn"/>
</span>
</li>
</ul>2.首先在頁面放兩個隱藏域，一個是當前頁碼，一個是總頁碼，總頁碼是頁面載入完，從後台查詢出來後直接附上值的，當前頁碼是沒操作一個，就要對當前頁碼賦值
<input id="jiazai" type="hidden" ></input><!-- 当前页码 --> <input id="totalpage" type="hidden" ></input><!-- 总页码 -->
3.寫一個頁面加載完的function，給總頁碼和當前頁碼賦值
$(function(){
$('#jiazai').val(1);//给当前页码进行赋值，默认为第一页
ajaxfunction(page,arg,chipssort,'');//这个方法是抽取的ajax后台访问的方法
});4.抽取的ajax方法，此頁面會用到好幾次這個方法，所有把它收取了出來，因為頁面的資料時透過ajax從後台取得的，後台回傳的是一個List集合
//抽取ajax的方法
function ajaxfunction(page,arg,chipssort,fontval){
$.ajax({
type:'POST',
url:'/admin/receptionchips/showlist',//请求的url地址
data:{
page:page,
sort:arg,
chipssort:chipssort,
fontval:fontval
},
dataType:'json',
contentType:'application/x-www-form-urlencoded; charset=utf-8',
success:function(data){
//返回值在进行访问抽取的方法，从后台返回
commonfunction(data);
}
});
}5.程式碼看到這也不是很多，最後一個了
//抽取拼串的方法
function commonfunction(data){
$('#projectlist').find("li").remove();
for (var i=0;i<data.length;i++ )
{
/*****因为此页面是动态加载的，这里主要就是进行拼串，代码也不少，就不漏出来占空间了*****/
}
//开始是分页的核心了
if(data.length>0){
//设置页码
var pading = data[0].padingnum;//总页码
$('#totalpage').val(pading);
var page = $('#jiazai').val();//当前页
$('#countpage').html("/"+pading+"");
$('#span_number').html("共"+pading+"页 到第页")
}else{
$('#countpage').html("/"+0+"");
}
//设置分页的底部 就是 首页 1 2 3 4 5 6 尾页
var pading = data[0].padingnum;//总页码href="javascript:void(0);"
var nowpage = $('#jiazai').val();//当前页
//one two three five fore
//下面代码看着是比较麻烦，但是也不难理解 全是一样的代码，只不过是加了些判断
if(nowpage純js實作分頁方法二：
function goPage(pno,psize){
var itable = document.getElementById("idData");
var num = itable.rows.length;//表格行数
var totalPage = 0;//总页数
var pageSize = psize;//每页显示行数
if((num-1)/pageSize > parseInt((num-1)/pageSize)){
totalPage=parseInt((num-1)/pageSize)+1;
}else{
totalPage=parseInt((num-1)/pageSize);
}
var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行
var endRow = currentPage * pageSize+1;//结束显示的行
endRow = (endRow > num)? num : endRow;
//前三行始终显示
for(i=0;i<1;i++){
var irow = itable.rows[i];
irow.style.display = "block";
}
for(var i=1;i=startRow&&i1){
tempStr += " "
}else{
tempStr += " ";
}
for (var i = 1; i <= totalPage; i++) {
if (i == currentPage) {
tempStr += i+" ";
} else {
tempStr += ""+i+" "
}
}
if(currentPage<totalPage){
tempStr += " ";
}else{
tempStr += " ";
}
tempStr +="";
document.getElementById("barcon").innerHTML = tempStr;
}
var base='';
window.onload = function(){
goPage(1,10);
}小貼中上一頁下一頁定義的圖片根據自己需求可以改的
好了，到這裡分頁就完成了，如果你們需要使用的話，可能會話費一會去理解我的代碼，其實程式碼不難，我是使用了兩個小時把它寫完的，只要一行一行程式碼看，並且自己再加註釋，把這塊弄過去，不出半小時絕對搞定！
好了，到此為止用兩種方法給大家介紹純js實現分頁就結束了，更多相關教程請訪問JavaScript視頻教程！
