js實(shí)現(xiàn)分頁(yè)功能
更新時(shí)間：2017年05月24日 16:44:01 作者：三木來(lái)啦
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)分頁(yè)功能，頁(yè)面查詢實(shí)現(xiàn)分頁(yè)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文僅為自己記錄下編寫過(guò)程，如有興趣，或者疑問(wèn)，請(qǐng)與我聯(lián)系。
寫前背景: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)有效果，苦于自己也找不到原因，故寫以下代碼，很是粗糙，不過(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;i<talPage;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(talPage>5){
//總頁(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<talPage;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{//當(dāng)前頁(yè)為中間時(shí)
for(var i=pageIndex-3;i<pageIndex+2;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);
}
}
}
}
if(pageIndex == talPage){//當(dāng)前頁(yè)為最大頁(yè)時(shí)，下一個(gè)和尾頁(yè)不可操作
var li_3 = document.createElement("li");
li_3.setAttribute("class","pageItemDisable bt4");
li_3.setAttribute("onclick","pageClick(this)")
li_3.innerHTML = "下一頁(yè)"
ul.appendChild(li_3);
var li_4 = document.createElement("li");
li_4.setAttribute("class","pageItemDisable bt4");
li_4.setAttribute("onclick","pageClick(this)")
li_4.innerHTML = "尾頁(yè)"
ul.appendChild(li_4);
}else{
var li_3 = document.createElement("li");
li_3.setAttribute("class","pageItem bt4");
li_3.setAttribute("onclick","pageClick(this)")
li_3.innerHTML = "下一頁(yè)"
ul.appendChild(li_3);
var li_4 = document.createElement("li");
li_4.setAttribute("class","pageItem bt4");
li_4.setAttribute("onclick","pageClick(this)")
li_4.innerHTML = "尾頁(yè)"
ul.appendChild(li_4);
}
if(0 == talPage){//一頁(yè)都沒(méi)有時(shí)，將首頁(yè)，上一頁(yè)，下一個(gè)，尾頁(yè)都置為不可操作
$(".bt4").removeClass("pageItem");
$(".bt4").addClass("pageItemDisable");
}
});
//分頁(yè)的按鈕的點(diǎn)擊事件
function pageClick(obj){
var talPage = ${countPage};//總頁(yè)數(shù)
var pageIndex = ${pageIndex};//當(dāng)前頁(yè)數(shù)
var text = obj.innerText;//點(diǎn)擊標(biāo)簽的值
var url = "<%=path%>/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è)面元素：
<ul id="getPage" class="page" style="list-style-type:none;"></ul>
所用到的css樣式：
<style type="text/css">
<!-- 分頁(yè)處的樣式 -->
.page{
list-style: none;
}
.page>li{
float: left;
padding: 5px 10px;
cursor: pointer;
}
.page .pageItem{
border: solid thin #DDDDDD;
margin: 5px;
}
.page .pageItemActive{
border: solid thin #0099FF;
margin: 5px;
background-color: #0099FF;
color:white;
}
.page .pageItem:hover{
border: solid thin #0099FF;
background-color: #0099FF;
color:white;
}
.page .pageItemDisable{
border: solid thin #DDDDDD;
margin: 5px;
background-color: #DDDDDD;
}
</style>
java中處理：
//獲取當(dāng)前頁(yè)
String pageIndex = "1";//默認(rèn)為第一頁(yè)
if(null != request.getParameter("pageIndex") && !"".equals(request.getParameter("pageIndex"))){
pageIndex = (String)request.getParameter("pageIndex");
}
//最后需要將當(dāng)前頁(yè)返回給前臺(tái)，用于樣式的展示
request.setAttribute("pageIndex", pageIndex);
//一頓計(jì)算。。。。,取得startNum,endNum
String startNum = Integer.toString(((Integer.parseInt(pageIndex)-1)*10)+1);
String endNum = Integer.toString(Integer.parseInt(startNum)+9);
//根據(jù)條件查詢
List<Service> serviceList = serviceServiceImpl.findAll(service,startNum,endNum);
//查詢出總數(shù)，用作分頁(yè)
Integer serviceCount = serviceServiceImpl.getServiceCount(service);
request.setAttribute("count",serviceCount);//總數(shù)
Integer countPage = serviceCount/10;
if((serviceCount/10.0-serviceCount/10)>0){//有小數(shù)，總頁(yè)數(shù)+1
countPage = countPage+1;
}
request.setAttribute("countPage",countPage);//總頁(yè)數(shù)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
常見(jiàn)Ajax下載文件方式以及報(bào)錯(cuò)解決辦法
AJAX(Asynchronous JavaScript and XML)是一種用于創(chuàng)建快速、動(dòng)態(tài)和交互式網(wǎng)頁(yè)的技術(shù),它的主要優(yōu)勢(shì)在于能夠在不刷新整個(gè)網(wǎng)頁(yè)的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互,這篇文章主要給大家介紹了關(guān)于常見(jiàn)Ajax下載文件方式以及報(bào)錯(cuò)解決辦法的相關(guān)資料,需要的朋友可以參考下2024-01-01
jstree創(chuàng)建無(wú)限分級(jí)樹(shù)的方法【基于ajax動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)】
這篇文章主要介紹了jstree創(chuàng)建無(wú)限分級(jí)樹(shù)的方法,結(jié)合實(shí)例形式分析了jstree基于ajax結(jié)合asp.net后臺(tái)動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)實(shí)現(xiàn)無(wú)限分級(jí)樹(shù)效果的相關(guān)步驟與操作技巧,需要的朋友可以參考下2016-10-10
這篇文章介紹了GRID拖拽行的實(shí)例代碼，有需要的朋友可以參考一下2013-07-07
節(jié)約時(shí)間，先寫出總結(jié)，推薦使用encodeURIComponent()來(lái)對(duì)URL進(jìn)行編碼。2008-10-10
微信小程序?qū)崿F(xiàn)點(diǎn)擊頁(yè)面出現(xiàn)文字
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊頁(yè)面出現(xiàn)文字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
javascript 語(yǔ)法學(xué)習(xí)練習(xí)
javascript 截取字符串排序2008-12-12
JavaScript生成隨機(jī)數(shù)的4種自定義函數(shù)分享
這篇文章主要介紹了JavaScript生成隨機(jī)數(shù)的4種自定義函數(shù)分享,本文講解了4種方法并同時(shí)給出4個(gè)代碼片段,需要的朋友可以參考下2015-02-02
解決頁(yè)面js接受Long型損失精度問(wèn)題(最新解決方案)
這篇文章主要介紹了解決頁(yè)面js接受Long型損失精度問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
JS構(gòu)建頁(yè)面的DOM節(jié)點(diǎn)結(jié)構(gòu)的實(shí)現(xiàn)代碼
本來(lái)想用json格式的，可是要么有重復(fù)，要么得嵌套，所以改用對(duì)象嵌套數(shù)組2011-12-12
常見(jiàn)的JavaScript內(nèi)存錯(cuò)誤及解決方法
這篇文章主要介紹了常見(jiàn)的JavaScript內(nèi)存錯(cuò)誤,JavaScript?不提供任何內(nèi)存管理操作。相反，內(nèi)存由?JavaScript?VM?通過(guò)內(nèi)存回收過(guò)程管理，該過(guò)程稱為垃圾收集。下面我們就來(lái)看看下面文章對(duì)JavaScript內(nèi)存錯(cuò)誤的各種舉例說(shuō)明吧2021-12-12