1. 首页
  2. 文章中心
  3. JavaScript

js实现分页功能

243 阅读 0 评论
我是靠谱客的博主 专注诺言，这篇文章主要介绍js实现分页功能，现在分享给大家，希望可以做个参考。

本文仅为自己记录下编写过程，如有兴趣，或者疑问，请与我联系。

写前背景:java开发工作经验一年，现项目为SSM框架，使用maven管理项目。需要页面查询实现分页，网上找了很多插件，单独页面实现是好的，可是放到我的页面就没有效果，苦于自己也找不到原因，故写以下代码，很是粗糙，不过懒得整理成js文件了。

效果：第一页时，首页和上一页为不可点击，最后一页时，下一页和尾页不可点击，页数只会显示5个

实现的js:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
//分页function
$(document).ready(function(){
 //获取分页数
 var talPage = ${countPage};
 //获取当前页数
 var pageIndex = ${pageIndex};
 var ul = document.getElementById("getPage");
 document.getElementById("getPage").innerHTML="";
 var li_0 = document.createElement("li");
 li_0.innerHTML = "总共："+${count}+"条，共："+${countPage }+"页，每页：10条";
 ul.appendChild(li_0);
 if(talPage==1 || pageIndex == 1){//第一页首页和上一页不可操作
  var li_1 = document.createElement("li");
  li_1.setAttribute("class","pageItemDisable bt4");
  li_1.setAttribute("onclick","pageClick(this)")
  li_1.innerHTML = "首页";
  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 = "上一页"
  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 = "首页";
  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 = "上一页"
  ul.appendChild(li_2);
 }
 //之前需要将，上一页创建出来
 if(talPage<=5){
  //总页数在0到5之间时，显示实际的页数
  for(var i=0;i<talPage;i++){
   if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
    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){
  //总页数大于5时，只显示五页，多出的隐藏
  //判断当前页的位置
  if(pageIndex<=3){//当前页小于等于3时，显示1-5
   for(var i=0;i<5;i++){
    if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
     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){//当前页为最后五页时
   for(var i=talPage-5;i<talPage;i++){
    if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
     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{//当前页为中间时
   for(var i=pageIndex-3;i<pageIndex+2;i++){
    if(i+1 == pageIndex){//循环数和当前页相等时,为当前页样式
     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){//当前页为最大页时，下一个和尾页不可操作
  var li_3 = document.createElement("li");
  li_3.setAttribute("class","pageItemDisable bt4");
  li_3.setAttribute("onclick","pageClick(this)")
  li_3.innerHTML = "下一页"
  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 = "尾页"
  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 = "下一页"
  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 = "尾页"
  ul.appendChild(li_4);
 }
 if(0 == talPage){//一页都没有时，将首页，上一页，下一个，尾页都置为不可操作
   $(".bt4").removeClass("pageItem");
   $(".bt4").addClass("pageItemDisable");
 }

});
//分页的按钮的点击事件
function pageClick(obj){
 var talPage = ${countPage};//总页数
 var pageIndex = ${pageIndex};//当前页数
 var text = obj.innerText;//点击标签的值
 var url = "<%=path%>/service/getServiceList.action";
 //如果为不可操作的直接返回false
  if($(obj).attr("class").indexOf("pageItemDisable")>=0){
  return false;
 } 
 with(document.forms["serviceForm"]){
  if("首页" == text){
   action = url;

  }else if("上一页" == text){
   //计算出上一页到底是第几页
   //第一种方法，获取当前li中class为pageItemActive的标签，取其值
   //第二种方法，直接el ${pageIndex}获取当前页数，然后-1
   //var a = $(obj).parent().children("pageItemActive").html();
   //如果当前页是1，不-,地址和首页相同
   if(pageIndex <= 1){
    action = url;   
   }else{
    action = url+"?pageIndex="+(pageIndex-1);
   }
  }else if("下一页" == text){
   //如果当前页为尾页，则下一页为尾页，url跟当前url一样
   if(pageIndex == talPage){
    action = url;
   }else{
    action = url+"?pageIndex="+(pageIndex+1);
   }
  }else if("尾页" == text){
   //如果当前页为尾页，则url不变
   if(pageIndex == talPage){
    action = url;
   }else{
    action = url+"?pageIndex="+talPage;
   }
  }else{
   //点击页数时
   action = url+"?pageIndex="+text;

  }
  submit();
 }

}

页面元素：

复制代码
1
<ul id="getPage" class="page" style="list-style-type:none;"></ul>

所用到的css样式：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style type="text/css">
 <!-- 分页处的样式 -->
 .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中处理：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//获取当前页
   String pageIndex = "1";//默认为第一页
   if(null != request.getParameter("pageIndex") && !"".equals(request.getParameter("pageIndex"))){
    pageIndex = (String)request.getParameter("pageIndex");
   }
   //最后需要将当前页返回给前台，用于样式的展示
   request.setAttribute("pageIndex", pageIndex);
   //一顿计算。。。。,取得startNum,endNum
   String startNum = Integer.toString(((Integer.parseInt(pageIndex)-1)*10)+1);
   String endNum = Integer.toString(Integer.parseInt(startNum)+9);
   //根据条件查询
   List<Service> serviceList = serviceServiceImpl.findAll(service,startNum,endNum);
   //查询出总数，用作分页
   Integer serviceCount = serviceServiceImpl.getServiceCount(service);
   request.setAttribute("count",serviceCount);//总数
   Integer countPage = serviceCount/10;
   if((serviceCount/10.0-serviceCount/10)>0){//有小数，总页数+1
    countPage = countPage+1;
   }
   request.setAttribute("countPage",countPage);//总页数

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

最后

以上就是专注诺言最近收集整理的关于js实现分页功能的全部内容，更多相关js实现分页功能内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(161)

相关文章

ps虚化图片边缘效果教程
ps虚化图片边缘效果教程
win7系统电脑图片预览不能显示的解决办法
win7系统电脑图片预览不能显示的解决办法
3dmax放样方向不对的转换方法介绍
3dmax放样方向不对的转换方法介绍
JavaScript动态改变HTML页面元素例如添加或删除
JavaScript动态改变HTML页面元素例如添加或删除
js实现分页功能
js实现分页功能
photoshop 将失真的照片转成柔美的清晰手绘效果
photoshop 将失真的照片转成柔美的清晰手绘效果
php分页函数
php分页函数
HTML制作个人简历的简单实现
HTML制作个人简历的简单实现

评论列表共有 0 条评论

立即
投稿
返回
顶部