简单分页功能的实现

分页功能有很多种实现方法，但是大体原理都是差不多的。
先说下我理解的分页的原理吧。
首先，通过sql语句查询，后台可以得到数据库中所需要数据的总条数，通过limit，也能得到指定范围的数据，这是后台的事。
我们前端大概需要两个参数，一个是当前页（pageNow），一个是每页显示多少条数据（pageSize）。
sql语句limit后面跟着的是所取数据的上界下界。比如说第一页取第一到第十条第二页取十一到20条，就是limit 1,10或者limit 11,20，我们可以通过（pageNow-1）*pageSize+1，pageNow*pageSize，获取到我们需要的数据，这也是后台的事。
还需要得到的一个数据就是总页数，总页数也有很多能得到的方式。比如说100条数据，每页显示10条那就是10页，101条就要11页，总页数（pageCount）就是总条数（Count）/pageSize取上限，javascript中pageCount = Math.ceil(Count/pageSize)；
后台如何获得到数据我们前端暂时不用关心，我们只用知道后台需要我们提供给它们当前页pageNow，每页显示条数pageSize，以及我们需要从后台得到的数据，总页数。接下来我们写一个bootstrap的分页。

/*计算总页数开始 */
    function getTotalPage(Count) {
        var pageCount = Math.ceil(Coun / pageSize);
        $("#bootstrapfenye").html("");

/*第一页及上一页 */
        var html = "<nav><ul class='pagination'><li class='herffirst'><a href='#' >&laquo;</a></li>";
        html = html + "<li class='old'><a href='#' >&lt;</a>"

/*动态加载为总页数的标签页 */
        for (var i = 1; i <= pageCount; i++) {
            if (i == 1) {
                html = html + "<li class='aherf active'><a href='#' >" + i+ "</a></li>";
            } else {
                html = html + "<li class='aherf'><a href='#' >" + i+ "</a></li>";
            }
        }
/*下一页及末页 */
        html = html + "<li class='next'><a href='#' >&gt;</a>"
        html = html+ " <li class='herflast'><a href='#' >&raquo;</a></li></ul></nav>";
        $('#bootstrapfenye').append(html);
        return pageCount;
    }
    /*计算总页数结束 */`

`
这时候我们的分页的外观就能显示出来了，接着我们所需要做的就是处理分页时候页面跳转的逻辑。
当页面加载时，默认为第一页。当点击第一页的时候，pageNow变为第一页，当点击末页的时候，pageNow变为与总页数相等的数值。当点下一页的时候，pageNow+1，其余li移除active类，下一页获得active类，上一页同理。接着不管点什么的时候，都做一个判断，先将所有的都移除disabled样式，接着当pageNow=1的时候将第一页上一页都变为disabled，当pageNow=pageCount的时候，将下一页及末页都变为disabled；然后给有disabled样式的元素添加不可点击的事件。

$(function() {
        /*上一页 */
        pageCount  = getTotalPage(Count());
        checkactive(pageCount );
        $("#bootstrapfenye").on("click", ".old", function() {
            if (pageNow > 1) {
                pageNow -= 1;
                /*pagingCount()与pagingList()为两个与后台交互的方法并对得到数据进行处理的方法 */
                pagingCount();
                pagingList();
                $(".aherf").removeClass("active");
                $(".aherf").eq(pageNow - 1).addClass("active");
                checkactive(pageCount)
            }
        });
        /* 下一页*/
        $("#bootstrapfenye").on("click", ".next", function() {
            if (pageNow < pageCount ) {
                pageNow += 1;
                pagingCount();
                pagingList();
                $(".aherf").removeClass("active");
                $(".aherf").eq(pageNow - 1).addClass("active");
                checkactive(pageCount);
            }
        });
        /*第一页 */
        $("#bootstrapfenye").on("click", ".herffirst", function() {
            checkactive(pageCount );
            if (pageNow > 1) {
                pageNow = 1;
                pagingCount();
                $(".aherf").removeClass("active");
                $(".aherf").eq(0).addClass("active");
                pagingList();
                checkactive(pageCount);
            }
        });
        /* 最后一页*/
        $("#bootstrapfenye").on("click", ".herflast", function() {
            if (pageNow < pageCount ) {
                pageNow = pageCount ;
                pagingCount();
                $(".aherf").removeClass("active");
                $(".aherf").eq(pageNow - 1).addClass("active");
                pagingList();
                checkactive(pageCount)
            }
        });
        /* 当前页 */
        $("#bootstrapfenye").on("click", ".aherf", function() {
            $(".aherf").removeClass('active');
            $(this).addClass('active');
            pageNow = $(this).text();
            pagingCount();
            pagingList();
            checkactive(pageCount)
        });
    })

    /*分页判断 */
    function checkactive(obj) {
        var activeNum = $('.active').text();
        $("nav li").removeClass("disabled");
        if (activeNum == 1) {
            $(".old").addClass("disabled");
            $(".herffirst").addClass("disabled");
            disabledclick();
        } else if (activeNum == obj) {
            $(".next").addClass("disabled");
            $(".herflast").addClass("disabled");
            disabledclick();
        }
    }
    /*按钮禁用 */
    function disabledclick() {               $("#bootstrapfenye").on("click",".disabled",function() {
            return false
        })
    }
    /* 分页结束 */

中间存在许多冗余代码，应该还可以继续精简。分页大功能大致就是这么实现的。