javascript - 如何使用SimplePagination jQuery

我正在尝试在我的代码上使用simplePagination。 (我正在使用MVC4 C#开发)

假设我有这堆代码

<table>
    <thead>
        <tr>
            <td><input type="checkbox" name="select-all" id="select-all" /></td>
            <td style="text-align: left">Name</td>
            <td style="text-align: left">Created By</td>
            <td style="text-align: left">Created Date</td>
        </tr>
    </thead>
    <tbody>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Window</td>
            <td>John</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Door</td>
            <td>Chris</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Floor</td>
            <td>Michael</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Car</td>
            <td>James</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
        <tr class="post">
            <td><p><input Length="0" name="314" type="checkbox" value="true" /><input name="314" type="hidden" value="false" /></p></td>
            <td>Bike</td>
            <td>Steven</td>
            <td>01/01/2014 12:00:00 AM</td>
        </tr>
    </tbody>
</table>

*注意:在上面的代码中，我将类“post”添加到每个“tr”(表主体中的行)。这些行是由for循环(C#)动态生成的

从文档中，如果我想使用simplePagination，我必须像这样声明jquery:

$(function() {
    $(selector).pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

实际上，我不太确定如何使用(*如何调用)此simplePagination。这是我第一次处理分页。

我已经尝试过将此代码放在桌子后面

<div class="pagination-page"></div>

并用“.pagination-page”更改jQuery调用方法中的“选择器”，但是它不起作用。

$(function() {
    $('.pagination-page').pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

我应该用类名替换“选择器”吗？如果是，我该怎么做？

其次是如何声明此simplePagination，以便每页仅显示2行(仅2类“Post”)？

*表示仅在第一页显示

+--------------------------------------------------+
| [] |  Name  | CreatedBy | CreatedDate            |
|--------------------------------------------------|
| [] | Window | John      | 01/01/2014 12:00:00 AM |
| [] | Door   | Chris     | 01/01/2014 12:00:00 AM |
+--------------------------------------------------+

第二页将显示

+--------------------------------------------------+
| [] |  Name  | CreatedBy | CreatedDate            |
|--------------------------------------------------|
| [] | Floor  | Michael   | 01/01/2014 12:00:00 AM |
| [] | Car    | James     | 01/01/2014 12:00:00 AM |
+--------------------------------------------------+

很快..

*注意:我不确定这个jquery如何检测到我们有多少项目并生成页面数并相应地放置这些项目。

最佳答案

关于此插件的一件事(可能会引起一些人的困惑)是，从技术上讲，它本身并未实现分页。它生成一个页面导航器，并通过jQuery事件提供将其简单地连接到我们自己的分页功能的方法。

假设您已按照问题中包含的simplePagination链接的要求执行了步骤1(如果需要CSS样式，则执行步骤2)，然后以下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();



});

如果您想更全面地了解这一切的实际工作原理，则可以找到正在运行的示例here，以及有关simplePagination here的更详尽的指南。

编辑:添加了一段代码来处理URL片段(重新加载以及后退/前进)，因为Mike O'Connor强调了这一点。您可以看到一个实时的URL片段处理here示例。

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

编辑3:如果要动态添加或删除内容，则需要手动更新分页器以反射(reflect)这些更改。我也为此举了一个例子。您可以看到它正在运行here。