分頁功能有很多種實現方法，但是大體原理都是差不多的。
先說下我理解的分頁的原理吧。
首先，通過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
        })
    }
    /* 分頁結束 */

中間存在許多冗餘程式碼，應該還可以繼續精簡。分頁大功能大致就是這麼實現的。