13518219792
这篇文章主要介绍js如何实现分页功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。
写前背景:java开发工作经验一年，现项目为SSM框架，使用maven管理项目。需要页面查询实现分页，网上找了很多插件，单独页面实现是好的，可是放到我的页面就没有效果，苦于自己也找不到原因，故写以下代码，很是粗糙，不过懒得整理成js文件了。
效果：第一页时，首页和上一页为不可点击，最后一页时，下一页和尾页不可点击，页数只会显示5个
实现的js:
//分页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;i5){
//总页数大于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/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();
}
} 页面元素：
所用到的css样式：
