如何使用SimplePagination jquery

Question

我想在我的代码上使用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>

*注意:在上面的代码中,我为每个'tr'(表体中的行)添加了类'post'.这些行是由for循环(C#)动态生成的

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

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

其实我不太确定如何使用(*如何调用)这个simplePagination.这是我第一次处理分页.

我已经尝试将此代码放在表格后面

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

并使用'.pagination-page'更改jquery调用方法中的'Selector',但它不起作用.

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

1. 我应该用类名替换'Selector'吗？如果是的话,我该怎么做？
2. 其次是我如何声明这个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将如何检测我们拥有多少项并生成页数并相应地放置这些项.

Answer 1

有一点需要注意的是这个插件,有些人可能会感到困惑,它在技术上并没有实现分页本身.它生成一个页面导航器,并通过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:如果您要动态添加或删除内容,则需要手动更新分页器以反映这些更改.我也为此掀起了一个例子.你可以看到它在这里运行.