這篇文章主要介紹js如何實(shí)現(xiàn)分頁(yè)功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫(xiě)HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
寫(xiě)前背景:java開(kāi)發(fā)工作經(jīng)驗(yàn)一年，現(xiàn)項(xiàng)目為SSM框架，使用maven管理項(xiàng)目。需要頁(yè)面查詢實(shí)現(xiàn)分頁(yè)，網(wǎng)上找了很多插件，單獨(dú)頁(yè)面實(shí)現(xiàn)是好的，可是放到我的頁(yè)面就沒(méi)有效果，苦于自己也找不到原因，故寫(xiě)以下代碼，很是粗糙，不過(guò)懶得整理成js文件了。
效果：第一頁(yè)時(shí)，首頁(yè)和上一頁(yè)為不可點(diǎn)擊，最后一頁(yè)時(shí)，下一頁(yè)和尾頁(yè)不可點(diǎn)擊，頁(yè)數(shù)只會(huì)顯示5個(gè)
實(shí)現(xiàn)的js:
重慶分公司
重慶分公司
//分頁(yè)function
$(document).ready(function(){
//獲取分頁(yè)數(shù)
var talPage = ${countPage};
//獲取當(dāng)前頁(yè)數(shù)
var pageIndex = ${pageIndex};
var ul = document.getElementById("getPage");
document.getElementById("getPage").innerHTML="";
var li_0 = document.createElement("li");
li_0.innerHTML = "總共："+${count}+"條，共："+${countPage }+"頁(yè)，每頁(yè)：10條";
ul.appendChild(li_0);
if(talPage==1 || pageIndex == 1){//第一頁(yè)首頁(yè)和上一頁(yè)不可操作
var li_1 = document.createElement("li");
li_1.setAttribute("class","pageItemDisable bt4");
li_1.setAttribute("onclick","pageClick(this)")
li_1.innerHTML = "首頁(yè)";
ul.appendChild(li_1);
var li_2 = document.createElement("li");
li_2.setAttribute("class","pageItemDisable bt4");
li_2.setAttribute("onclick","pageClick(this)")
li_2.innerHTML = "上一頁(yè)"
ul.appendChild(li_2);
}else{
var li_1 = document.createElement("li");
li_1.setAttribute("class","pageItem bt4");
li_1.setAttribute("onclick","pageClick(this)")
li_1.innerHTML = "首頁(yè)";
ul.appendChild(li_1);
var li_2 = document.createElement("li");
li_2.setAttribute("class","pageItem bt4");
li_2.setAttribute("onclick","pageClick(this)")
li_2.innerHTML = "上一頁(yè)"
ul.appendChild(li_2);
}
//之前需要將，上一頁(yè)創(chuàng)建出來(lái)
if(talPage<=5){
//總頁(yè)數(shù)在0到5之間時(shí)，顯示實(shí)際的頁(yè)數(shù)
for(var i=0;i5){
//總頁(yè)數(shù)大于5時(shí)，只顯示五頁(yè)，多出的隱藏
//判斷當(dāng)前頁(yè)的位置
if(pageIndex<=3){//當(dāng)前頁(yè)小于等于3時(shí)，顯示1-5
for(var i=0;i<5;i++){
if(i+1 == pageIndex){//循環(huán)數(shù)和當(dāng)前頁(yè)相等時(shí),為當(dāng)前頁(yè)樣式
var li = document.createElement("li");
li.setAttribute("class","pageItemActive");
li.setAttribute("onclick","pageClick(this)")
li.innerHTML = i+1;
ul.appendChild(li);
}else{
var li = document.createElement("li");
li.setAttribute("class","pageItem");
li.setAttribute("onclick","pageClick(this)")
li.innerHTML = i+1;
ul.appendChild(li);
}
}
}else if(pageIndex>talPage-5){//當(dāng)前頁(yè)為最后五頁(yè)時(shí)
for(var i=talPage-5;i/service/getServiceList.action";
//如果為不可操作的直接返回false
if($(obj).attr("class").indexOf("pageItemDisable")>=0){
return false;
}
with(document.forms["serviceForm"]){
if("首頁(yè)" == text){
action = url;
}else if("上一頁(yè)" == text){
//計(jì)算出上一頁(yè)到底是第幾頁(yè)
//第一種方法，獲取當(dāng)前l(fā)i中class為pageItemActive的標(biāo)簽，取其值
//第二種方法，直接el ${pageIndex}獲取當(dāng)前頁(yè)數(shù)，然后-1
//var a = $(obj).parent().children("pageItemActive").html();
//如果當(dāng)前頁(yè)是1，不-,地址和首頁(yè)相同
if(pageIndex <= 1){
action = url;
}else{
action = url+"?pageIndex="+(pageIndex-1);
}
}else if("下一頁(yè)" == text){
//如果當(dāng)前頁(yè)為尾頁(yè)，則下一頁(yè)為尾頁(yè)，url跟當(dāng)前url一樣
if(pageIndex == talPage){
action = url;
}else{
action = url+"?pageIndex="+(pageIndex+1);
}
}else if("尾頁(yè)" == text){
//如果當(dāng)前頁(yè)為尾頁(yè)，則url不變
if(pageIndex == talPage){
action = url;
}else{
action = url+"?pageIndex="+talPage;
}
}else{
//點(diǎn)擊頁(yè)數(shù)時(shí)
action = url+"?pageIndex="+text;
}
submit();
}
} 頁(yè)面元素：
所用到的css樣式：
