简单分页功能的实现

分页功能有很多种实现方法，但是大体原理都是差不多的。
先说下我理解的分页的原理吧。
首先，通过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        })    }    /* 分页结束 */

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