jQuery异步分页插件

　　学校软件工程让写课程设计（其实就是自选语言做个项目），感觉都是重复的东西就没有很认真的去写内容，更加注意写一些之前没有用过的东西。

　　因为一直都使用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;
}