jquery動態(tài)實現(xiàn)表格分頁的方法是利用自帶的分頁插件jQuery.page.js。
創(chuàng)新互聯(lián)是一家專業(yè)提供隴縣企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站制作、HTML5建站、小程序制作等業(yè)務(wù)。10年已為隴縣眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。
下面是使用方法：
$(".tcdPageCode").createPage({
? pageCount:10,
? current:1,
? backFn:function(p){
? ? ? //單擊回調(diào)方法，p是當(dāng)前頁碼
? }
});
pageCount：總頁數(shù)
current：當(dāng)前頁
實現(xiàn)分頁的tab如下：
div class="tcdPageCode"
span class="disabled"上一頁/span
span class="current"1/span
a href="javascript:;" class="tcdNumber"2/a
a href="javascript:;" class="tcdNumber"3/a
a href="javascript:;" class="tcdNumber"4/a
span.../span
a href="javascript:;" class="tcdNumber"6/aa href="javascript:;" class="nextPage"下一頁/a/div
實現(xiàn)效果：
先把查詢出來的東西放入session對象，在當(dāng)前頁面讀取出部分信息，為button按鈕添加一個單擊事件。查看詳細信息也不一定非要在新頁面，當(dāng)前頁面添加一個div，做成彈出窗口的效果即可如$("#button1").click(function(){$("body").animate({$(this).append("div style='background:#aaa;position:fixed;left:400px;top:250px;width:400px;height:300px'/div")},500);
這個是一個思路而已，div里面也可以放上其他html標(biāo)簽。彈窗效果有了，然后再把內(nèi)容添加到這個div就行了，也可以用jquery的jquery ui插件里面的dialog方法彈窗。
，要是在新頁面的話設(shè)定好樣式，重新讀取session內(nèi)容即可。
script?language="javascript"
var?pagesize=5;//每頁顯示幾條信息
var?totalRecord=$("#PageCon?li").length;//獲取信息的總數(shù)
//計算總頁數(shù)
var?totalPages=totalRecord?%?pagesize?==?0???totalRecord?/?pagesize?:?Math.ceil(totalRecord?/?pagesize);
$(function(){??
$('#PageShowUL').twbsPagination({????????
totalPages:?totalPages,//總頁數(shù)????????
visiblePages:7,//顯示的頁數(shù)????????
version:'1.1',//或1.0??1.1是自動根據(jù)當(dāng)前頁動態(tài)顯示頁碼??????
first:"首頁",????
prev:"下一頁",????
next:"上一頁",????
last:"尾頁",????????
onPageClick:?function?(event,page)?{??????????
$("#PageCon?li").hide();????????????
$("#PageCon?li").slice((page-1)*pagesize,page*pagesize).show();????????
}????
});????????
});
/script
具體的看這里：
twbs-pagination分頁插件的實際應(yīng)用實例
!DOCTYPE?html????
html?lang="en"????
head????
meta?charset="UTF-8"????
meta?name="viewport"?content="width=device-width,?initial-scale=1.0"????
meta?http-equiv="X-UA-Compatible"?content="ie=edge"????
titleDocument/title????
/head????
body????
table????
tr????
th1/th????
th2/th????
th3/th????
th4/th????
/tr????
/table????
table?id="result"????
tr????
td1/td????
td2/td????
td3/td????
td4/td????
/tr????
tr????
td1/td????
td2/td????
td3/td????
td4/td????
/tr????
tr????
td1/td????
td2/td????
td3/td????
td4/td????
/tr????
tr????
td1/td????
td2/td????
td3/td????
td4/td????
/tr????
/table????
div?id="barcon"/div????
script????
window.onload?=?function?()?{????
goPage(1)????
}????
function?goPage(pno)?{????
var?itable?=?document.getElementById("result");????
var?num?=?itable.rows.length;?//表格所有行數(shù)(所有記錄數(shù))????
console.log(num);????
var?totalPage?=?0;?//總頁數(shù)????
var?pageSize?=?3;?//每頁顯示行數(shù)????
//總共分幾頁????
if?(num?/?pageSize??parseInt(num?/?pageSize))?{????
totalPage?=?parseInt(num?/?pageSize)?+?1;????
}?else?{????
totalPage?=?parseInt(num?/?pageSize);????
}????
var?currentPage?=?pno;?//當(dāng)前頁數(shù)????
var?startRow?=?(currentPage?-?1)?*?pageSize?+?1;?//開始顯示的行??31????
var?endRow?=?currentPage?*?pageSize;?//結(jié)束顯示的行???40????
endRow?=?(endRow??num)???num?:?endRow;?//40????
//遍歷顯示數(shù)據(jù)實現(xiàn)分頁????
for?(var?i?=?1;?i??(num?+?1);?i++)?{????
var?irow?=?itable.rows[i?-?1];????
if?(i?=?startRow??i?=?endRow)?{????
irow.style.display?=?"table-row";????
}?else?{????
irow.style.display?=?"none";????
}????
}????
var?pageEnd?=?document.getElementById("pageEnd");????
var?tempStr?=?"span共"?+?totalPage?+?"頁/span";????
if?(currentPage??1)?{????
tempStr?+=?"span?class='btn?spanbtn'?href=\"#\"?onClick=\"goPage("?+?(1)?+?")\"首頁/span";????
tempStr?+=?"span?class='btn?spanbtn'?href=\"#\"?onClick=\"goPage("?+?(currentPage?-?1)?+?")\"上一頁/span"????
}?else?{????
tempStr?+=?"span?class='btn?spanbtn'首頁/span";????
tempStr?+=?"span?class='btn?spanbtn'上一頁/span";????
}????
if?(totalPage?==?1)?{????
tempStr?+=?"a?onclick=\"goPage("?+?currentPage?+?")\"span?class='spanbtn?nowpage?pageicon'"?+?currentPage?+????
"/span/a"????
}?else?if?(totalPage?==?2??currentPage?==?1)?{????
tempStr?+=?"a?onclick=\"goPage("?+?currentPage?+?")\"span?class='spanbtn?pageicon?nowpage'"?+?currentPage?+????
"/span/a"?+?"a?onclick=\"goPage("?+?(currentPage?+?1)?+?")\"span?class='spanbtn?pageicon'"?+????
(currentPage?+?1)?+?"/span/a"????
}?else?if?(totalPage?==?2??currentPage?==?2)?{????
tempStr?+=?"a?onclick=\"goPage("?+?(currentPage?-?1)?+?")\"span?class='spanbtn?pageicon'"?+?(currentPage?-????
1)?+?"/span/a"?+?"a?onclick=\"goPage("?+?currentPage?+?")\"span?class='spanbtn?nowpage?pageicon'"?+????
currentPage?+?"/span/a"????
}?else?if?(totalPage?=?3??currentPage?==?1)?{????
tempStr?+=?"a?onclick=\"goPage("?+?currentPage?+?")\"span?class='spanbtn?nowpage?pageicon'"?+?currentPage?+????
"/span/a"?+?"a?onclick=\"goPage("?+?(currentPage?+?1)?+?")\"span?class='spanbtn?pageicon'"?+????
(currentPage?+?1)?+????
"/span/a"?+?"a?onclick=\"goPage("?+?(currentPage?+?2)?+?")\"span?class='spanbtn?pageicon'"?+?(????
currentPage?+?2)?+????
"/span/a"????
}?else?if?(totalPage?=?3??currentPage?==?totalPage)?{????
tempStr?+=?"a?onclick=\"goPage("?+?(currentPage?-?2)?+?")\"span?class='spanbtn?pageicon'"?+?(currentPage?-????
2)?+????
"/span/a"?+?"a?onclick=\"goPage("?+?(currentPage?-?1)?+?")\"span?class='spanbtn?pageicon'"?+????
(currentPage?-?1)?+????
"/span/a"?+?"a?onclick=\"goPage("?+?currentPage?+?")\"span?class='spanbtn?nowpage??pageicon'"?+????
currentPage?+????
"/span/a"????
}?else?{????
tempStr?+=?"a?onclick=\"goPage("?+?(currentPage?-?1)?+?")\"span?class='spanbtn?pageicon'"?+?(currentPage?-????
1)?+????
"/span/a"?+?"a?onclick=\"goPage("?+?currentPage?+?")\"span?class='spanbtn?nowpage?pageicon'"?+????
currentPage?+????
"/span/a"?+?"a?onclick=\"goPage("?+?(currentPage?+?1)?+?")\"span?class='spanbtn?pageicon'"?+?(????
currentPage?+?1)?+????
"/span/a"????
}????
if?(currentPage??totalPage)?{????
tempStr?+=?"span?class='btn?spanbtn'?href=\"#\"?onClick=\"goPage("?+?(currentPage?+?1)?+?")\"下一頁/span";????
tempStr?+=?"span?class='btn?spanbtn'?href=\"#\"?onClick=\"goPage("?+?(totalPage)?+?")\"尾頁/span";????
}?else?{????
tempStr?+=?"span?class='btn?spanbtn'下一頁/span";????
tempStr?+=?"span?class='btn?spanbtn'尾頁/span";????
}????
document.getElementById("barcon").innerHTML?=?tempStr;????
}????
/script????
/body????
/html
自己修改一下table中元素的CSS樣式，分頁頁碼的樣式，就能看出來效果了
重慶分公司
重慶分公司
