bootstrap3分页

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
int limit = 20;
int pageCount = 100;
int pageNow = 2;
String pre = path+"/manager/"+"doXxx_xxx?1=1";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"
href="../js/bootstrap3/css/bootstrap.min.css" />
<script type="text/javascript" src="../js/jquery-1.10.4/js/jquery-1.10.2.js"></script>
</head>

<body>
<ul class="pagination">
<%
if(pageNow==1){
//上一页不可用
%><li class="disabled"><a href="#" >&laquo;</a></li><%
}else{
%><li><a href="<%=pre %>&start=<%=(pageNow-2)*limit+1 %>&limit=<%=limit %>">&laquo;</a></li><%
}
if(pageCount<=10){
//全部显示
for(int i=1;i<pageCount+1;i++){
%><li <%if(pageNow==i)%>class="active"<% %> ><a href="<%=pre %>&start=<%=(i-1)*limit+1 %>&limit=<%=limit %>"><%=i %></a></li><%
}
}else{
if(pageNow>6&&pageCount-pageNow>4){
//以之为中心,左边显示5条,右边显示4条
for(int i=pageNow-5;i<pageNow+4;i++){
%><li <%if(pageNow==i)%>class="active"<% %> ><a href="<%=pre %>&start=<%=(i-1)*limit+1 %>&limit=<%=limit %>"><%=i %></a></li><%
}
}else if(pageNow<=6){
//显示1--10条
for(int i=1;i<11;i++){
%><li <%if(pageNow==i)%>class="active"<% %> ><a href="<%=pre %>&start=<%=(i-1)*limit+1 %>&limit=<%=limit %>" ><%=i %></a></li><%
}
}else if(pageCount-pageNow<=4){
//显示最后10页
for(int i=pageCount-9;i<=pageCount;i++){
%><li <%if(pageNow==i)%>class="active"<% %> ><a href="<%=pre %>&start=<%=(i-1)*limit+1 %>&limit=<%=limit %>" ><%=i %></a></li><%
}
}
}
if(pageNow>=pageCount){
//下一页不可使用
%><li class="disabled"><a href="#">&raquo;</a></li><%
}else{
%><li><a href="<%=pre %>&start=<%=(pageNow)*limit+1 %>&limit=<%=limit %>" >&raquo;</a></li><%
}
%>
<!--
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
-->
</ul>
</body>
</html>

时间: 2025-01-15 19:57:13

bootstrap3分页的相关文章

【Bootstrap3.0建站笔记三】AspNetPager分页,每一列都可排序

1.AspNetPager分页,实现每一列都可排序: (1).需要将默认排序字段放在HTML页面中. (2).排序字段放置为td节点的属性. 如图: 实现的效果图如: HTML代码: <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class="table table-striped table-hover tabl

MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页

文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-pagedlist.html 系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (10) 数据查询页面 源码下载:点我下载 目录 前言 排序 搜索 分页 结尾 前言 上一节我们做到了如下的一个基础查询页面.本节我们向这个页面中加入排序.搜索和分页功能. 排序 从上图中的地址栏中可以看到

bootstrap3之分页

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"

Bootstrap3基础 pagination 分页按钮 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

利用bootstrap3的分页样式和jq实现分页功能

1源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-

day18-2-django之分页和session

Django-4 知识预览 分页器(paginator) COOKIE 与 SESSION 回到顶部 分页器(paginator) 分页器的使用 >>> from django.core.paginator import Paginator >>> objects = ['john', 'paul', 'george', 'ringo'] >>> p = Paginator(objects, 2) >>> p.count       

datatables 配套bootstrap3样式使用小结(1)

今天介绍汇总一下datatables. 网址: www.datatables.net 公司CMS内容资讯站的后台管理界面用了大量的table来管理数据,试用了之后,感觉挺不错,推荐一下. 先上一个基本的效果图. (图片太宽了,换了另一个模板) 介绍一下这个demo的实现. 首先是引用 js+css. js有4个,①jquery,②bootstrap3,③datatables的js,④datatables对应bootstrap样式时用的. 为了说明问题,就不放bundle里面了. <script

如何用ajax写分页查询(以留言信息为例)-----2017-05-17

要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总数. (2)计算分页信息,此处,以每页显示5条信息为例.分页列表(如图)以当前页为中心,向前显示2条,向后显示2条. (3)给每个分页列表添加对应的点击事件. (4)能够实现分页后,添加查询分页功能. 现实效果图: 第一步:引入 jquery文件和bootstrap文件.(因为表格和分页均是用的bo

Bootstrap:表格和栅格分页

拼接table请将以下代码直接运行:换下 bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js" 1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <title>产品列表</title> 5 <meta charset="utf-8" /> 6 <meta h