js实现分页功能
更新时间：2017年05月24日 16:44:01 作者：三木来啦
这篇文章主要为大家详细介绍了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;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();
}
}
页面元素：
<ul id="getPage" class="page" style="list-style-type:none;"></ul>
所用到的css样式：
<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中处理：
//获取当前页
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);//总页数
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
AJAX(Asynchronous JavaScript and XML)是一种用于创建快速、动态和交互式网页的技术,它的主要优势在于能够在不刷新整个网页的情况下与服务器进行数据交互,这篇文章主要给大家介绍了关于常见Ajax下载文件方式以及报错解决办法的相关资料,需要的朋友可以参考下2024-01-01
jstree创建无限分级树的方法【基于ajax动态创建子节点】
这篇文章主要介绍了jstree创建无限分级树的方法,结合实例形式分析了jstree基于ajax结合asp.net后台动态创建子节点实现无限分级树效果的相关步骤与操作技巧,需要的朋友可以参考下2016-10-10
这篇文章介绍了GRID拖拽行的实例代码，有需要的朋友可以参考一下2013-07-07
节约时间，先写出总结，推荐使用encodeURIComponent()来对URL进行编码。2008-10-10
这篇文章主要介绍了微信小程序实现点击页面出现文字，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
javascript 截取字符串排序2008-12-12
这篇文章主要介绍了JavaScript生成随机数的4种自定义函数分享,本文讲解了4种方法并同时给出4个代码片段,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了解决页面js接受Long型损失精度问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
本来想用json格式的，可是要么有重复，要么得嵌套，所以改用对象嵌套数组2011-12-12
这篇文章主要介绍了常见的JavaScript内存错误,JavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。下面我们就来看看下面文章对JavaScript内存错误的各种举例说明吧2021-12-12
最新评论