分页是每个网站并不可少的，但是处理往往非常麻烦，虽然有很多的插件可以使用，但复杂度依然不减，今天我们来手敲一个最简单的实现方式，看够之后分页再也不是难题，而且以后用插件也懂原理了。手动擒来！
文章概略：
-
分页的原理
-
分层实现
-
附赠Git开源代码
我们先来说下原理吧，分页就是数据库的数据太多了，一次性查看不完，分批次查看。一般分页分为从数据库处理分页和在服务器端处理分页两大类。
在数据库分页就是用多少数据jdbc去多少数据，比如取100条数据，则用sql语句查询出100条语句就可以了。在服务器分页就是把数据库所有数据都取到服务器，然后客户要多少数据返回多少数据。一般这种方式io要求很高，而且浪费资源。不建议使用，目前开发都是使用第一种方式，编译好sql语句，在数据库服务器处理分页，而且数据库的服务器一般处理速度很快，利用商用。
分页无非就是服务器返回“总页数”和“当前页数”，然后客户端（一般是浏览器）对应处理。我们分层来写。
css代码：用作美化，你可以改成你喜欢的样式/*分页*/
/*在div paging中的a标签的属性，很简单的css*/
#paging{
width: 80%;
margin: 20px auto 40px auto;
text-align: center;
color: #666666;
font-size: 1.2em;
font-weight: 700;
}
#paging a{
color: #666666;
font-size: 1.2em;
font-weight: 700;
padding:5px 10px;
}
#paging a:hover{
background-color: #FF464E;
color: #F5F5F5;
}
html代码：
javascritp进行的逻辑判断，就是用来个document.writer，简单吧
备注：我是有的是java编写的，用了ssm框架，而且url是RESTful风格的，你可以改成普通风格的，代码注释很详细，我在这不解释了。
RESTful风格：http://localhost:8080/youxuan/index/2
普通风格：http://localhost:8080/youxuan/index?page=2
最终的结果：
总页数小于10页时（共6页），全部显示，访问第1页如下：
总页数大于10，当前页数小于10时，显示前10页，访问第2页如下：
总页数大于10，当前页数大于10时，我们让他显示左右各5页，但是考虑增加5页可能超出总页数。我们增加判断以后结果如下：
当前页 5页没超出总页数，显示当前页左右各5页，访问第10页如下：
当前页 5页超出总页数，显示到最后一页并向前显示10页，访问第20页（最后一页）如下：
实现代码如下：
<script>
/*
分页：接收参数：总页数，当前页数
默认一个页面显示10个页数
可能的情况：
总页数小于10页
全部显示
总页数大于10页
当前页小于10页，显示前10页
当前页大于10页，显示左右各5页
当前页数 5页大于总页数，显示到最后一页
否则显示左右各5页
*/
var path ="${ pageContext.request.contextPath }";//获得当前应用的地址现在是 /youxuan
var url = path "/index";//a标签的地址
//el表达式取得当前页和总页数
var nowPage=${Paging.nowPage};//当前页
var countPage=${Paging.countPage};//总页数
var count=10;//页面显示多少记录,默认每页显示10个记录
//判断“首页”是否显示
if(nowPage>1){
document.writeln(" <a href=\"" url "/1\">首页</a>");//采用RESTful格式url
}
//总页数小于10页,显示全部页
if(countPage<=count){
for (var i=1;i<=countPage;i ) {
document.writeln(" <a href=\"" url "/" i "\">" i "</a>");//采用RESTful格式url
}
}else{
//总页数大于10页
//当前页小于10页，显示前10页
if(nowPage<count){
for (var i=1;i<=count;i ) {
document.writeln(" <a href=\"" url "/" i "\">" i "</a>");//采用RESTful格式url
}
//显示省略号和最后一页
document.writeln("...<a href=\"" url "/" countPage "\">" countPage "</a>");
}else{
//当前页数大于等于10页，左右各显示5页
if (nowPage <= countPage) {
//当前页 5大于总页数,显示到最后一页，显示前10页
if (nowPage 5 >= countPage) {
for (var i = nowPage - 10; i <= countPage; i ) {
document.writeln(" <a href=\"" url "/" i "\">" i "</a>");//采用RESTful格式url
}
} else {
//当前页 5小于总页数,左右各显示5页
for (var i = nowPage - 5; i <= nowPage 5; i ) {
document.writeln(" <a href=\"" url "/" i "\">" i "</a>");//采用RESTful格式url
}
//显示省略号和最后一页
document.writeln("...<a href=\"" url "/" countPage "\">" countPage "</a>");
}
}
}
}
//判断尾页是否显示
if(nowPage<countPage){
document.writeln(" <a href=\"" url "/" countPage "\">尾页</a>");
}
</script>
最好我们最好加个“跳转到第几页的功能”，如图
实现代码：
到<input type="number" id="page" style="width: 80px;"/>页
<input type="button" onclick="goPage()" value="转到" style="background-color: #6c6c6c;padding: 6px; color: #F5F5F5;border: 0"/>
</div>
<script>
//跳转到第几页
function goPage() {
var page= document.getElementById("page").value;
var type = /^[1-9] $/;
var re = new RegExp(type);
if (page.match(re) == null) {
//输入格式错误
alert("亲，页数一个正整数哦~");
}else {
//判断是否大于总页数
if(page>countPage){
alert("亲，总共只有" countPage "页呢~");
}else {
window.location.href=url "/" page;
}
}
}
</script>
这个这么简单，就不解释了吧。
最后，我们说一下后台实现，我用的是ssm框架，封装了一个分页的bean，代码如下
package com.youxuan.util;
/**
* Created by 两毛五哥哥 on 2016/8/26.
* 分页工具类
*/
public class Paging {
private int countDate;//总数据
private int countPage;//总页数
private int nowPage;//当前页数
private int pageCount;//每页显示多少数据
/**
* 构造函数
* @param countDate
* @param pageCount
* @param nowPage
*/
public Paging(int countDate,int pageCount,int nowPage){
this.countDate=countDate;
this.pageCount=pageCount;
this.nowPage=nowPage;
if(countDate%pageCount==0){
this.countPage=countDate/pageCount;
}else {
this.countPage=countDate/pageCount 1;
}
}
/**
* 构造函数，默认每页显示100条数据
* @param countDate
* @param nowPage
*/
public Paging(int countDate,int nowPage){
this(countDate,100,nowPage);
}
public int getCountDate() {
return countDate;
}
public void setCountDate(int countDate) {
this.countDate = countDate;
}
public int getCountPage() {
return countPage;
}
public void setCountPage(int countPage) {
this.countPage = countPage;
}
public int getNowPage() {
return nowPage;
}
public void setNowPage(int nowPage) {
this.nowPage = nowPage;
}
public int getPageCount() {
return pageCount;
}
public void setPageCount(int pageCount) {
this.pageCount = pageCount;
}
}
然后再servlet（controller）中返回这个封装的对象。你可以不用封装也行，我觉的这样可移植性好，下次做项目直接拿来用了。这个项目我做完会开源贡献的，喜欢的点个赞吧。
最后：git代码下载地址：https://git.oschina.net/lovepeng/share-for-you.git
@两毛五哥哥，90逗逼程序员，欢迎骚扰
,
