如何使用SimplePagination jquery

有一点需要注意的是这个插件,有些人可能会感到困惑,它在技术上并没有实现分页本身.它生成一个页面导航器,并通过jQuery事件提供方法,简单地将其连接到我们自己的分页功能.

假设您已经按照问题中包含的simplePagination链接所需的步骤1(和2,如果您想要CSS样式),则以下jQuery将执行您所需的操作:

jQuery(function($) {
    // Consider adding an ID to your table
    // incase a second table ever enters the picture.
    var items = $("table tbody tr");

    var numItems = items.length;
    var perPage = 2;

    // Only show the first 2 (or first `per_page`) items initially.
    items.slice(perPage).hide();

    // Now setup the pagination using the `.pagination-page` div.
    $(".pagination-page").pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "light-theme",

        // This is the actual page changing functionality.
        onPageClick: function(pageNumber) {
            // We need to show and hide `tr`s appropriately.
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;

            // We'll first hide everything...
            items.hide()
                 // ... and then only show the appropriate rows.
                 .slice(showFrom, showTo).show();
        }
    });



    // EDIT: Let's cover URL fragments (i.e. #page-3 in the URL).
    // More thoroughly explained (including the regular expression) in: 
    // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment/index.html

    // We'll create a function to check the URL fragment
    // and trigger a change of page accordingly.
    function checkFragment() {
        // If there's no hash, treat it like page 1.
        var hash = window.location.hash || "#page-1";

        // We'll use a regular expression to check the hash string.
        hash = hash.match(/^#page-(\d+)$/);

        if(hash) {
            // The `selectPage` function is described in the documentation.
            // We've captured the page number in a regex group: `(\d+)`.
            $(".pagination-page").pagination("selectPage", parseInt(hash[1]));
        }
    };

    // We'll call this function whenever back/forward is pressed...
    $(window).bind("popstate", checkFragment);

    // ... and we'll also call it when the page has loaded
    // (which is right now).
    checkFragment();



});

你可以找到一个正在运行的例子在这里,并在simplePagination更彻底的指导在这里,如果你想更彻底地理解这一切是如何实际工作.

编辑:添加了一段代码来处理URL片段(重新加载和后退/前进),因为Mike O'Connor强调了需要.您可以在此处查看 URL片段处理的实时示例.

编辑2:如果您需要跨浏览器兼容性进行后向/前向片段更新(即IE11 ...),请在实现上述代码之前包含History.js脚本.感谢Mike O'Connor :)

编辑3:如果您要动态添加或删除内容,则需要手动更新分页器以反映这些更改.我也为此掀起了一个例子.你可以看到它在这里运行.