学校软件工程让写课程设计（其实就是自选语言做个项目），感觉都是重复的东西就没有很认真的去写内容，更加注意写一些之前没有用过的东西。
因为一直都使用TP框架来写PHP，TP又自带分页类，想到这里就想试试写一个异步分页，于是昨天用了4个小时思考带调试写来出来...
思路：
异步分页和同步分页最直观的一点就是切换数据页不用刷新页面，然后用Jquery动态的来创建一些html元素并给与相应的显示规则，结合后台请求来切换表格数据。切换表格数据不属于分页内容，因此这里只探讨分页空间本身。
实现：
接下来大致说一下我写的这个分页类
function Page(count,listRow,showPageCount,obj,getData){
var o = {};//分页对象
o.nowPage = 1;//当前为第几页
o.listRow = listRow;//一页显示多少条数据
o.getData = getData;//取数据的回调函数
o.obj = obj;//制定在那个元素后面显示(Jquery对象)
o.count = count;//数据总数
//总页数
o.totalPage = o.count% o.listRow == 0? parseInt(o.count/ o.listRow) : parseInt(o.count/ o.listRow+1);
//显示多少个分页按钮
o.showPageCount = o.showPageCount < o.totalPage? o.showPageCount : o.totalPage;
o.first = 1;//第一个显示的分页按钮是多少
//最后一个显示的分页按钮是多少
o.last = o.totalPage > showPageCount?showPageCount: o.totalPage;
使用JS工厂创建对象，先说说参数列表:
| 参数 | 描述 |
| count | 数据总数 |
| listRow | 每页显示的数据数量 |
| showPageCount | 显示多少个分页按钮 |
| obj | 在哪个对象后创建分页控件 |
| getData | 点击按钮事件后的回调函数，用于得到数据并修改界面UI |
对象属性：
| 属性 | 描述 |
| nowPage | 当前是第几页 |
| listRow | 一页能显示多少条数据 |
| getData | 点击按钮事件后的回调函数，用于得到数据并修改界面UI |
| obj | 在哪个对象后创建分页控件 |
| count | 数据总数 |
| totalPage | 一共有多少页 |
| showPageCount | 显示多少个分页按钮 |
| first | 分页控件从第几页开始显示 |
| last | 分页控件显示到第几页 |
这些属性中，
totalPage是计算出来的，它等于数据总数除以每页的数据量，如果不能整除还需要加1。
showPageCount是计算出来的，它如果比totalPage还大，值就为totalPage，否则就等于传进来的参数。
first是分页控件中最左边的按钮的值，初始为1。
last是分页控件中最左边的值，初始为showPageCount。
在分页控件不断地变化中，其实真正改变的只是first,last和nowPage这三个属性。
下面一起来看一下分页控件的产生过程
/*
* 创建分页控件
*/
o.createPage = function()
{
//拼接分页控件
var html = "<div class = 'page-div'><div class = 'my-page'>";
for(var i = 0 ; i < o.showPageCount ; i++)
{
//拼接每一个分页数组按钮，并为其设置id
html += "<a href='#' id=page"+(i+1)+" class = 'page-item each-page'>"+(i+1)+"</a>";
}
//拼接下一页按钮
html += "<a href='#' class = 'page-item next-page'>>></a></div></div>";
//在指定的对象后创建控件
o.obj.after(html);
$("#page1").css("background-color","gray");
//调用获取数据的回调函数
o.getData(o.nowPage, o.listRow);
}
从代码中可以看出，Page对象有一个createPage方法，它通过组装html来实现创建分页控件，同时，第16行是在指定的jquery对象后面添加该元素，17行是让默认第一个按钮为被选中的加深背景颜色，最后调用回调函数getData来获得分页控件所控制的第一次的数据。
注意getData中有两个参数，传的分别是当前的页数和每一页多少行数据，相信用过分页的人都知道，这两个参数到后台是为了用limit来限制数据库查询的。
创建后接下来我们要为创建的元素来绑定事件，代码如下：
/*
* 为控件绑定点击事件
*/
o.bindAction = function()
{
$(".pre-page").click(function(){
o.nowPage = parseInt(o.nowPage) - 1;
if(o.nowPage < (o.totalPage-o.showPageCount/2) && o.first > 1)
{
o.first = parseInt(o.first) - 1;
o.last = parseInt(o.last) - 1;
}
o.updatePage();
o.updateColor($(this),$("#page"+ o.nowPage));
o.getData(o.nowPage, o.listRow);
}); $(".each-page").click(function(){
o.nowPage = $(this).text();
if(o.nowPage >= o.showPageCount/2+1 && o.nowPage <= (o.totalPage - o.showPageCount/2))
{
if(o.showPageCount%2 == 0)
{
o.first = parseInt(o.nowPage)-parseInt(o.showPageCount/2-1);
o.last = parseInt(o.nowPage)+parseInt(o.showPageCount/2);
}
else
{
o.first = parseInt(o.nowPage)-parseInt(o.showPageCount/2);
o.last = parseInt(o.nowPage)+parseInt(o.showPageCount/2);
}
}
else if(o.nowPage < o.showPageCount/2)
{
o.first = 1;
o.last = o.showPageCount;
}
else if(o.nowPage > (o.totalPage - o.showPageCount/2))
{
o.first = parseInt(o.totalPage) - parseInt(o.showPageCount)+1;
o.last = parseInt(o.totalPage);
}
o.updatePage();
o.updateColor($(this),$("#page"+ o.nowPage));
o.getData(o.nowPage, o.listRow);
}); $(".next-page").click(function(){
o.nowPage = parseInt(o.nowPage) + 1;
if(o.last < o.totalPage && o.nowPage > o.showPageCount/2+1)
{
o.first = parseInt(o.first) + 1;
o.last = parseInt(o.last) + 1;
}
o.updatePage();
o.updateColor($(this),$("#page"+ o.nowPage));
o.getData(o.nowPage, o.listRow);
});
}
其实这里主要是为三类按钮绑定事件，分别是pre-page、each-page和next-page，对应的按钮分别是，前一页，中间的数字按钮和后一页。
首先要先为大家说明一点的是，分页的居中问题，用过分页的我们都应该知道，分页如果不是在选择的页数不是最靠近第一页或者靠近最后一页，那么当前的选择项应该是默认在中间的。这样说可能大家也不是很清楚，我拿baidu的分页给大家举例说明：
首先我们先选中第一页来看效果：
可以看到选择第一页的时候是没有前一页的按钮的。
接下来我们点击第二页看看：
可以看到，上一页出现了，但是2这个按钮并没有居中显示，因为它的左边只有1并且1已经显示出来了。
点击7看看结果：
可以看大，7居中显示了，因为它的左边即显示不到1，右边也显示不到16（共16页）
我们在点击15看看效果：
可以看出来该结果一共是16页的，所以当点击15的时候因为右边最大显示的是16，所以15也没有居中显示
同样的当我们点击16的时候下一页的按钮会消失。
相信说道这里，大家对于分页已经有一个简单的认识了，那么接下来，我们看看该如何去判断这些问题。
其实前面也说了，判断这些界限问题，主要就是根据first、last和nowPage来改变分页状态的，nowPage是我们直接改变的，first和last是根据nowPage而间接进行改变的。
第6~16行处理的是点击前一页时所触发的事件。首先让当前页数-1，正常来讲此时我们应该让firstPage和lastPage都-1来保证能够显示到更前面的一些页面。但是我们需要考虑到上面说的居中问题，所以我们需要先进行一个判断，如果当前的页面是小于 totalPage-showPageCount/2（这样判断就可以保证在最右边如果接近了最大页数可以不再去改变first和last的值），同时也要保证，first是大于1的，如果等于1了肯定就不会在first和last的值肯定就不会改变了，那么就可以是first和last-1，属性修改之后，第13~15行分别是重新生成分页元素，修改被选中项的背景，然后重新请求数据。（这三个方法后面会讲到）
第18~46行处理的是点击每一个分页按钮所触发的事件。首先让当前页数为所点击的按钮的页数，然后需要判断nowPage，先判断如果
nowPage >= o.showPageCount/2+1 && o.nowPage <= (o.totalPage - o.showPageCount/2)
也就是说如果是nowPage即不靠近左边的1，也不靠近最大页数，那么就应该让当前选中的页居中显示。所以first和last就应该分别设置到nowPage两端，在设置之前还要先判断，如果按钮个数是偶数个的话，是不可能让被选中的按钮在正中间的，所以需要设置
o.first = parseInt(o.nowPage)-parseInt(o.showPageCount/2-1);
o.last = parseInt(o.nowPage)+parseInt(o.showPageCount/2);
如果是奇数个就可以在正中间，那么就设置为
o.first = parseInt(o.nowPage)-parseInt(o.showPageCount/2);
o.last = parseInt(o.nowPage)+parseInt(o.showPageCount/2);
接下来就需要判断，如果nowPage是小于showPageCount/2的，也就是说是靠近1的，此时first和last就应该保持不变，first就是1，last就是showPageCount的值。
如果nowPage是大于totalPage-showPageCount/2的，也就是说是靠近totalPage的，此时first就是totalPage-showPageCount/2+1，last就是totalPage。
然后和上面一样调用重新生成分页元素，修改被选中项的背景和重新请求数据的方法。
第48~57行和第一类思路是一样的，只不过判断的是last的临界，这里就不再螯述了。
下面看另外一个方法:
/*
* 更新分页控件
*/
o.updatePage = function()
{
//根据当前页判断重新拼接分页控件
var html = "";
if(o.nowPage != 1)
{
html += "<a href='#' class = 'page-item pre-page'><<</a>";
}
for(var i = o.first ; i <= o.last ; i++)
{
html += "<a href='#' id=page"+i+" class = 'page-item each-page'>"+i+"</a>";
}
if(o.nowPage != o.totalPage)
{
html+="<a href='#' class = 'page-item next-page'>>></a>";
}
$(".my-page").html(html);
o.bindAction();
}
该方法是更新分页控件的方法，根据nowPage、first和last来更新，
首先判断如果nowPage不是第一页，那么就加上‘上一页’的按钮。
然后根据first和last来循环添加中间的数字按钮。
接下来如果nowPage不是最后一页，那么就加上'下一页'的按钮。
最后为新生成的元素绑定事件。
/**
* 显示分页空间
*/
o.show = function()
{
o.delete();
o.createPage();
o.bindAction();
}
/*
* 更新控件颜色
*/
o.updateColor = function(self,obj)
{
//将所有的分页按钮背景颜色设为白色
self.parent().find('a').css("background-color","white");
//将选中的按钮背景设为灰色
obj.css("background-color","gray");
}
/*
* 删除控件
*/
o.delete = function()
{
$(".page-div").html(" ");
}
最后三个方法放在一起说了。
首先说下更新控件颜色，传的参数一个是触发事件的对象，另一个是需要设置为选中状态的对象，分别改变他们的颜色。
显示分页控件很简单，实际上就是删除原有的分页，创建新的分页最后绑定事件。写该方法是因为有时候我们操作数据会改变数据的个数，此时我们就需要重新创建一个分页对象，就需要调用该方法。
说了这么多接下来就说说用法
用法很简单
var searchTable = function(nowPage,listRows)
{
var url = $("#search").attr("url");
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
var realname = $("#realname").val();
var mode = 0;
if($("#user_mode").attr("value") == 1)
mode = 1;
else
mode = 2;
$.ajax({
type:"post",
url:url,
data:{"startTime":startTime,"endTime":endTime,"real_name":realname,"mode":mode,"now_page":nowPage,"list_rows":listRows},
success:function(data)
{
if(data == 0)
{
alert("暂无符合要求数据");
}
else
{
data = JSON.parse(data);
removeDataRow();
addNewData(data);
}
},
error:function()
{
alert("查询失败");
}
});
}
首先定义了取数据的回调函数。
var url = $("#data-count").attr("value");
$.ajax({
url: url,
type:"post",
success:function(result)
{
var page = new Page(result,1,10,$("#data-table"),searchTable);
page.show();
}
,
error:function()
{
alert("路径错误");
}
});
然后得到数据总数，并创建分页即可，实际上就
var page = new Page(result,1,10,$("#data-table"),initTable);
page.show();
这两句是我们分页类有关的代码，剩下的都是为我们的参数所准备的代码。
这里说一下，如果我们想要动态的修改表格数据，是需要重新生成分页类的，也就是说需要重新得到正确的参数来构造分页对象。
最后附上源码供大家参考（样式表大家可以定制自己喜欢的，这里我就不再传了）：
/**
* Created by gy on 15/4/19.
*/ function Page(count,listRow,showPageCount,obj,getData){
var o = {};//分页对象
o.nowPage = 1;//当前为第几页
o.listRow = listRow;//一页显示多少条数据
o.getData = getData;//取数据的回调函数
o.obj = obj;//制定在那个元素后面显示(Jquery对象)
o.count = count;//数据总数
//总页数
o.totalPage = o.count% o.listRow == 0? parseInt(o.count/ o.listRow) : parseInt(o.count/ o.listRow+1);
//显示多少个分页按钮
o.showPageCount = o.showPageCount < o.totalPage? o.showPageCount : o.totalPage;
o.first = 1;//第一个显示的分页按钮是多少
//最后一个显示的分页按钮是多少
o.last = o.totalPage > showPageCount?showPageCount: o.totalPage; /**
* 显示分页空间
*/
o.show = function()
{
o.delete();
o.createPage();
o.bindAction();
} /*
* 创建分页控件
*/
o.createPage = function()
{
//拼接分页控件
var html = "<div class = 'page-div'><div class = 'my-page'>";
for(var i = 0 ; i < o.showPageCount ; i++)
{
//拼接每一个分页数组按钮，并为其设置id
html += "<a href='#' id=page"+(i+1)+" class = 'page-item each-page'>"+(i+1)+"</a>";
}
//拼接下一页按钮
html += "<a href='#' class = 'page-item next-page'>>></a></div></div>";
//在指定的对象后创建控件
o.obj.after(html);
$("#page1").css("background-color","gray");
//调用获取数据的回调函数
o.getData(o.nowPage, o.listRow);
}
/*
* 更新分页控件
*/
o.updatePage = function()
{
//根据当前页判断重新拼接分页控件
var html = "";
if(o.nowPage != 1)
{
html += "<a href='#' class = 'page-item pre-page'><<</a>";
}
for(var i = o.first ; i <= o.last ; i++)
{
html += "<a href='#' id=page"+i+" class = 'page-item each-page'>"+i+"</a>";
}
if(o.nowPage != o.totalPage)
{
html+="<a href='#' class = 'page-item next-page'>>></a>";
}
$(".my-page").html(html);
o.bindAction();
}
/*
* 更新控件颜色
*/
o.updateColor = function(self,obj)
{
//将所有的分页按钮背景颜色设为白色
self.parent().find('a').css("background-color","white");
//将选中的按钮背景设为灰色
obj.css("background-color","gray");
}
/*
* 删除控件
*/
o.delete = function()
{
$(".page-div").html(" ");
}
/*
* 为控件绑定点击事件
*/
o.bindAction = function()
{
$(".pre-page").click(function(){
o.nowPage = parseInt(o.nowPage) - 1;
if(o.nowPage < (o.totalPage-o.showPageCount/2) && o.first > 1)
{
o.first = parseInt(o.first) - 1;
o.last = parseInt(o.last) - 1;
}
o.updatePage();
o.updateColor($(this),$("#page"+ o.nowPage));
o.getData(o.nowPage, o.listRow);
}); $(".each-page").click(function(){
o.nowPage = $(this).text();
if(o.nowPage >= o.showPageCount/2+1 && o.nowPage <= (o.totalPage - o.showPageCount/2))
{
if(o.showPageCount%2 == 0)
{
o.first = parseInt(o.nowPage)-parseInt(o.showPageCount/2-1);
o.last = parseInt(o.nowPage)+parseInt(o.showPageCount/2);
}
else
{
o.first = parseInt(o.nowPage)-parseInt(o.showPageCount/2);
o.last = parseInt(o.nowPage)+parseInt(o.showPageCount/2);
}
}
else if(o.nowPage < o.showPageCount/2)
{
o.first = 1;
o.last = o.showPageCount;
}
else if(o.nowPage > (o.totalPage - o.showPageCount/2))
{
o.first = parseInt(o.totalPage) - parseInt(o.showPageCount)+1;
o.last = parseInt(o.totalPage);
}
o.updatePage();
o.updateColor($(this),$("#page"+ o.nowPage));
o.getData(o.nowPage, o.listRow);
}); $(".next-page").click(function(){
o.nowPage = parseInt(o.nowPage) + 1;
if(o.last < o.totalPage && o.nowPage > o.showPageCount/2+1)
{
o.first = parseInt(o.first) + 1;
o.last = parseInt(o.last) + 1;
}
o.updatePage();
o.updateColor($(this),$("#page"+ o.nowPage));
o.getData(o.nowPage, o.listRow);
});
}
return o;
}