js+bootstrap实现分页页码
制作page.jsp，在其他页码引入，只需把最外层的form标签的id设置为myForm；
其中 totalPages:共有多少页；totalElements：共有有多少条记录；currentPage：第几页
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="${pageContext.request.contextPath}/。。。/bootstrap.css" rel="stylesheet" type="text/css">
<script src="${pageContext.request.contextPath}/。。。/jquery/1.11.1/jquery.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/。。。/bootstrap.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分页页面</title>
<style type="text/css">
/*翻页*/
.jump{
margin:0px 0;
float: right;
}
.jump_text{
float:right;
margin:0 0 0 5px;
line-height:33px;
}
.jump_text input{
width:40px;
border:rgba(212,212,212,1.00) 1px solid;
height:30px;
line-height:33px;
background:#fff;}
</style>
<script type="text/javascript"> /*
* 引用此页面，只需在外面
*/ function goPage(){
var jumpPage = document.getElementById("jumpPage").value;
var totalPage = '${totalPages}';
if(isNaN(jumpPage)){
alert("请输入数字!");
return;
}else if(jumpPage.length==0){
alert("请输入页码!");
}else if(jumpPage<=0 || Number(jumpPage)>Number(totalPage)){
alert("非法的页码【"+jumpPage+"】!");
document.getElementById("jumpPage").value="";
return;
}else{
var flag = $("input[name='pageNumber']");
flag.remove();
$("#myForm").append("<input type='hidden' name='currentPage' value='"+jumpPage+"' />");
$("#myForm").submit();
}
}
function pageTo(pageNumber){
var jumpPage=1;
if(pageNumber==-1){
var curpage='${pageNumber}';
jumpPage=Number(curpage)-1;
}else if(pageNumber==-2){
var curpage='${pageNumber}';
jumpPage=Number(curpage)+1;
}else{
jumpPage=Number(pageNumber);
}
var flag = $("input[name='pageNumber']");
flag.remove();
$("#myForm").append("<input type='hidden' name='currentPage' value='"+jumpPage+"' />");
$("#myForm").submit();
}
</script>
</head>
<body>
<!-- 分页页码 -->
<div style="height: 400px;"> </div>
<hr>
<nav>
<ul class="pagination"> <!-- 上一页 -->
<!-- 当当前页码为1时，隐藏上一页按钮 -->
<li <c:if test="${currentPage==1 }">class="disabled"</c:if>>
<!-- 当当前页码不等于1时，跳转到上一页 -->
<a
<c:if test="${currentPage==1 }">href="javaScript:void(0)"</c:if>
<c:if test="${currentPage!=1 }">href="javaScript:pageTo('${currentPage-1 }')"</c:if>
>上一页</a>
</li> <!-- 页码 -->
<!-- 当总页数小于等于7时，显示页码1...7页 -->
<c:if test="${totalPages<=7}">
<c:forEach begin="1" end="${totalPages}" var="i">
<li <c:if test="${currentPage==i }">class="active"</c:if>>
<a
href="javaScript:pageTo('${i}')">${i}</a>
</li>
</c:forEach>
</c:if>
<!-- 当总页数大于7时 -->
<c:if test="${totalPages>7}">
<!-- 当前页数小于等于4时，显示1到5...最后一页 -->
<c:if test="${currentPage<=4}">
<c:forEach begin="1" end="5" var="i">
<li <c:if test="${currentPage==i }">class="active"</c:if>>
<a
href="javaScript:pageTo('${i}')">${i}</a>
</li>
</c:forEach>
<li><a href="#">...</a></li>
<li
<c:if test="${currentPage==totalPages }">class="active"</c:if>>
<a
href="javaScript:pageTo('${totalPages}')">${totalPages}</a>
</li>
</c:if>
<!-- 当前页数大于4时，如果当前页小于总页码书-3，则显示1...n-1,n,n+1...最后一页 -->
<c:if test="${currentPage>4}">
<c:if test="${currentPage<totalPages-3}">
<li><a
href="javaScript:pageTo('${1}')">${1}</a>
</li>
<li><a href="#">...</a></li>
<c:forEach begin="${currentPage-1 }" end="${currentPage+1 }"
var="i">
<li <c:if test="${currentPage==i }">class="active"</c:if>>
<a
href="javaScript:pageTo('${i}')">${i}</a>
</li>
</c:forEach>
<li><a href="#">...</a></li>
<li
<c:if test="${currentPage==totalPages }">class="active"</c:if>>
<a
href="javaScript:pageTo('${totalPages}')">${totalPages}</a>
</li>
</c:if>
</c:if>
<!-- 当前页数大于4时，如果当前页大于总页码书-4，则显示1...最后一页-3，最后一页-2，最后一页-1，最后一页 -->
<c:if test="${currentPage>totalPages-4}">
<li><a
href="javaScript:pageTo('${1}')">${1}</a>
</li> <li><a href="#">...</a></li>
<c:forEach begin="${totalPages-3 }"
end="${totalPages }" var="i">
<li <c:if test="${currentPage==i }">class="active"</c:if>>
<a
href="javaScript:pageTo('${i}')">${i}</a>
</li>
</c:forEach>
</c:if>
</c:if>
<!-- 下一页 -->
<!-- 当当前页码为最后一页或者最后一页为0时，隐藏下一页按钮
当当前页码不等于总页码时，跳转下一页 -->
<li
<c:if test="${currentPage==totalPages || totalPages==0}">class="disabled"</c:if>>
<a
<c:if test="${currentPage==totalPages || totalPages==0 }">href="javaScript:void(0)"</c:if>
<c:if test="${currentPage!=totalPages }">href="javaScript:pageTo('${currentPage+1 }')"</c:if>>下一页</a>
</li>
</ul> <!-- 跳转页 -->
<div class="jump">
<span class="jump_text">共有${totalPages }页,${totalElements }条记录,跳到
<input type="text" name="jumpPage"
id="jumpPage"
onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');">页
<button type="button" class="btn btn-primary btn-xs"
onclick="goPage()">GO</button>
</span>
</div>
</nav> <div style="clear: both;"></div>
<hr>
totalPages:共有多少页；totalElements：共有有多少条记录；currentPage：第几页
</body>
</html>
展示：
js+bootstrap实现分页页码的更多相关文章
- js实现前端分页页码管理
用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...
- 使用KnockoutJs+Bootstrap实现分页
[后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端 ...
- Bootstrap Paginator分页插件
Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...
- datatable.js 服务端分页+fixColumns列固定
前言 记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...
- bootstrap实现分页
bootstrap分页功能 写前端都会面临的一个问题就是分页,如果是纯js分页也是可以的,只是可能代码量比较大,所以今天写一个关于用bootstrap框架分页的例子,希望以后可以帮助到一些对这方面比较 ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- bootstrap table分页（前后端两种方式实现）
bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
随机推荐
- 微信小程序之自定义模态弹窗（带动画）实例
1.基本需求. 实现用户自定义弹框 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 获取弹出框的内容,自定义事件获取 2.案例目录结构 二.程序实现具体步骤 1.弹框index.wxml代码 ...
- 夜谈Java类的定义
女孩:谈Java了,好耶? 男孩:夜谈一下,Java的类的定义~ 女孩:那谈Java的类的什么呢? 男孩:类的定义,对象的定义,类中的方法,构造方法,this关键字,方法的重载,Java中的类的访问权 ...
- web API简介(二)：客户端储存之document.cookie API
概述 前篇:web API简介(一):API,Ajax和Fetch 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据.document.cook ...
- linux中环境变量PATH设置错误，导致ls cd 等命令不能使用，提示：没有那个文件或目录
在CentOS7中执行了 PATH=/opt/:$PATH 然后执行ls时,出现 ls-bash: ls: 没有那个文件或目录 试了试其他命令也一样无法使用 后来执行 : export PATH=/u ...
- LeetCode：110_Balanced Binary Tree | 平衡二叉树 | Easy
要求:判断一棵树是否是平衡二叉树 Given a binary tree, determine if it is height-balanced. For . 代码如下: struct TreeNod ...
- LeetCode:151_Reverse Words in a String | 字符串中单词的逆反 | Medium
题目:Reverse Words in a String Given an input string, reverse the string word by word. For example, Gi ...
- JavaScript的Date类的函数特殊处理导致的问题
记得以前参加校招的时候,总是有日期相关的面试题,比如计算两个日期之间的间隔天数.以前还觉得这种题就是为了纯粹为了面试的,但工作了之后,还就碰到了跟日期相关的bug.下面是一段js代码,是要把字符串描述 ...
- Ubantu 16.04升级内核版本和还原到升级之前的内核版本的方法
一.查看系统信息 1.查看发布版本: 命令: lsb_release -a 运行结果: / 2.查看内核版本: 命令: uname -sr 运行结果: 二.升级内核的方法 1.内核下载地址:http: ...
- kubernetes入门之构建单机集群
1.kubernetes简介 kubernetes简称k8s,它是一个全新的基于容器技术的分布式架构方案,它是谷歌十几年来大规模应用容器技术的经验累积和升华的一个重要成果.如果我们的系统设计遵循了k8 ...
- Hadoop服务库与事件库的使用及其工作流程
Hadoop服务库与事件库的使用及其工作流程 Hadoop服务库: YARN采用了基于服务的对象管理模型,主要特点有: 被服务化的对象分4个状态:NOTINITED,INITED,STARTED, ...