如何使用 SimplePagination jquery答案

【问题标题】：How to use SimplePagination jquery如何使用 SimplePagination jquery
【发布时间】：2014-01-20 16:13:15
【问题描述】：

我正在尝试在我的代码中使用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调用方法中的'Selector'，但它不起作用。

$(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 将如何检测我们有多少项目并生成页面数量并相应地放置这些项目。

【问题讨论】：

您使用的分页代码是否显示了任何内容？如果您根据包含的 simplePagination 链接中的第 1 步和第 2 步完成了所有链接，那么使用该代码，您应该会看到一个带有 10 个页面的“轻主题”页面导航器，单击该页面时，什么都不做：P 如果你看到这一点，我可以继续帮助您实际使用您的表格进行分页:)

标签： javascript jquery html jquery-pagination

【解决方案1】：

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

【讨论】：

我建议使用 jquery slice 方法 [Ref: api.jquery.com/slice/] 过滤任务而不是 items.each 循环。例如$("table tr").slice(start, start + per_page).show();
非常感谢！！它正在工作:) 所以我们必须附加我们自己的代码来隐藏和显示一些项目。我认为这一切都已经由 simplePagination jquery 处理了。非常感谢人：D
PS：我在这里做了一个关于使用 simplePagination 的完整演练：bilalakil.me/simplepagination
SimplePagination 是否也适用于表格中没有的项目？ ctv.ca/MasterChefCanada/video.aspx例如，我想在本站使用 SimplePagination 对所有视频片段进行分页，可以吗？
它不需要使用表格，它可以使用任何你想要的东西 - 你只需要适应 JavaScript/jQuery - 即你需要显示/隐藏 9 个视频的批次一次而不是 9 个表行。

【解决方案2】：

好的，我已经测试了 Bilal Akil 的 jQuery(function($)，这对我来说是一个好的开始——感谢 Bilal。它可以工作，但有一些缺陷。首先，如果你去 his first link 并点击在第 2 页上，该数字在位置框中显示为 #page-2 中的“http://bilalakil.github.io/bin/simplepagination/#page-2”---。但是，如果您复制整个 URL 并将其粘贴到另一个选项卡或窗口的位置框中以模拟某人链接到第 2 页，然后它就不起作用了；您会发现自己在第 1 页。或者在您单击第 2 页按钮并转到第 2 页后，您可以重新加载页面；您会发现自己在第 1 页1.

我会发表评论，但我需要在这里留下一些代码。这是我修改后的 jQuery(function($) 并修复了该特定问题：

  var items = $("#content .page");
  var numItems = items.length;
  var hashPageNum = getPageNum();  //code for getPageNum() is below
  items.hide().slice(hashPageNum-1, hashPageNum).show();

  // now setup pagination
  $("#pagination").pagination({

    items: numItems,
    itemsOnPage: 1,
    cssStyle: "light-theme",
    onPageClick: function(pageNumber) {
    items.hide().slice(pageNumber-1, pageNumber).show();
    }

  });
  $('#pagination').pagination('drawPage', hashPageNum);

我应该先说我用于页面元素的选择器方案如下：

<div id="pagination"></div>
<table id="content"><tbody><tr class="page"><td>...

我只使用 perPage=1，每页一个

，但本质区别在于这一行：

items.hide().slice(hashPageNum-1, hashPageNum).show();

这是该问题的主要解决方案，即最后带有#page-n 的链接不起作用。最后一行也是为此目的所必需的，因为它设置了显示第 n 页的分页栏。

第二个问题是 Bilal 的裸代码完全无法使用后退和前进按钮。如果您将分页栏放在长页面的底部，读者肯定会想要使用浏览器的内置页面导航。 编辑： Bilal 已经更新了他的代码以消除这些问题。

因此，这里有一个函数，其中包含一个重要的细节。它在上面的代码中被调用，但也在另一个地方：

function getPageNum(){
  var hashtag = parent.location.hash;
  var hashPageNum = 1; //default
  if (hashtag == '#page-1') {
    hashPageNum=1;
  } else if (hashtag == '#page-2'){
    hashPageNum=2;
  } else if (hashtag == '#page-3') {
    hashPageNum=3;
  } else if (hashtag == '') {
    hashPageNum=1;
    parent.location.hash = '#page-1';
  };
  return hashPageNum;
};

好吧，我明白我不够老练，但重要的细节是如果 parent.location.hash 为 null，则函数返回 1，对于第 1 页---不为 null。

现在还有一个步骤，那就是武器化 window.onpopstate，这是一个 HTML5 的东西（希望这不会对非 html5 浏览器造成问题......如果你知道这一切，请评论）：

window.onpopstate = function(e){
  var pagenum = getPageNum();
  $("#content .page").hide().slice(pagenum-1, pagenum).show();
  $('#pagination').pagination('drawPage', pagenum);
};

我似乎已经完成了。我可以复制带有 #page-n 后缀的 URL，然后在其他地方启动它们，它们就可以工作了。前进和后退按钮起作用。请注意，上面代码中的“drawPage”位只是为了调整分页栏中的指示。

好的，这是 2015 年 2 月 16 日的编辑...显示对 cmets 中讨论的 IE11 问题的修复。我没有编辑上面的代码，因为也许你不想这样修复，尽管它似乎确实有效。

首先转到this github project，然后为文件键入“t”（哈哈！）并单击history.min.js，然后单击原始按钮并在浏览器中执行另存为。因此，您将使用该 JavaScript 库，该库有效地为不引发它们的浏览器创建 popstate 事件（和其他事件）。

现在，在上面的代码中删除 window.onpopstate = function(e){} 但保存它的代码块并将其插入到 jQuery(function($) 的末尾，就在 $('#pagination') 之后.pagination('drawPage', hashPageNum);，如下：

  $(window).on('popstate', function(e) {
  var pagenum = getPageNum();
   $("#content .page").hide().slice(pagenum-1, pagenum).show();
   $('#pagination').pagination('drawPage', pagenum);
  });

编辑我必须补充一点，如果您在您的网站上放置一个指向您的分页页面之一的链接——例如，您的主页可能在菜单中有指向您的某些分页页面的锚点——然后，如果您将 target="_blank" 放入链接中并将 href 放入 www.yourdomain.com/yourpaginatedpage，一切都会好起来的。这会很好，因为您不会尝试使用浏览器上的后退箭头返回主页，因为分页页面将作为新标签页或新窗口打开。

但是...如果您离开 target="_blank" 并在同一窗口中打开分页页面，您会发现后退按钮不起作用。当您按下后退箭头时，历史记录就在那里（实际上这是错误的，因为您的分页页面有两个列表），但无论点击多少箭头都不会使其工作。

解决方法就是将 www.yourdomain.com/yourpaginatedpage#page-1 作为您的 href... 加上 #page-1。然后后退箭头将起作用。

【讨论】：

@Bilal Akil，非常感谢您的客气话……在这里表示感谢。你的代码是我能找到的唯一有意义的东西，所以我接受了它。现在有一个坏消息：后退和前进箭头在 IE11 上仍然不起作用。然而，其他改进确实如此，而且箭头在 IE11 上并没有做傻事。他们只是什么都不做。我找到了一个网站，它按 HTML5 支持对浏览器进行排名，而前五名的 IE11 排名最后。
再次做得很好。遗憾的是，我们仍然需要最新版本的 IE 的 polyfill：/ 但这就是生活，不是吗：P 查看我的答案的编辑，以便巧妙地整合页面片段处理！它可能看起来很重，但主要是 cmets。

【解决方案3】：

我测试了 Bilal Akil 的 jQuery(function($))，发现了一个我想纠正的错误 - 感谢 Bilal 参与此主题。

由于我无法发表评论或建议编辑他的帖子，我将直接在此处发布我的答案。如需更多信息，请查看 Bilal Akil 的帖子。

当我在网站上尝试时，代码中的分页选择器错误（实际上不一样），所以我决定编辑你的帖子，顺便添加了 2 个变量以确保未来更改或自定义的灵活性.

// mind the slight change below, personal idea of best practices
jQuery(function($) {
    // consider adding an id to your table,
    // just incase a second table ever enters the picture..?
    var items = $("table tbody tr");

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

    var pagination_placeholder_selector = ".pagination-page"; // put in a variable to ensure proper changes in the future
    var myPageName = "#page-"; // a number will follow for each page

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

    // now setup your pagination
    // you need that .pagination-page div before/after your table
    $(pagination_placeholder_selector).pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "light-theme",
        hrefTextPrefix: myPageName,
        onPageClick: function(pageNumber) { // this is where the magic happens
            // someone changed page, lets hide/show trs appropriately
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;

            items.hide() // first hide everything, then show for the new page
                 .slice(showFrom, showTo).show();
        }
    });



    // EDIT: extra stuff to cover url fragments (i.e. #page-3)
    // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment
    // is more thoroughly commented (to explain the regular expression)

    // we'll create a function to check the url fragment and change page
    // we're storing this function in a variable so we can reuse it
    var checkFragment = function() {
        // if there's no hash, make sure we go to page 1
        var hash = window.location.hash || (myPageName+"1");

        // we'll use regex to check the hash string
        var re = new RegExp("^"+myPageName+"(\\d+)$");
        hash = hash.match(re);

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

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

    // and we'll also call it to check right now!
    checkFragment();



});

【讨论】：

【解决方案4】：

当我通过 ajax 调用加载数据时，我已将 Bilal Akil 的工作转换为一个函数并将其调用为 ajax。它工作得很棒。感谢所有参与者。

function paginate() {
// consider adding an id to your table,
// just incase a second table ever enters the picture..?
var items = jQuery("#searched_prfiles .row .col-md-4");

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

var pagination_placeholder_selector = "#pagination_links"; // put in a variable to ensure proper changes in the future
var myPageName = "#page-"; // a number will follow for each page

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

// now setup your pagination
// you need that .pagination-page div before/after your table
jQuery(pagination_placeholder_selector).pagination({
    items: numItems,
    itemsOnPage: perPage,
    cssStyle: "light-theme",
    hrefTextPrefix: myPageName,
    onPageClick: function(pageNumber) { // this is where the magic happens
        // someone changed page, lets hide/show trs appropriately
        var showFrom = perPage * (pageNumber - 1);
        var showTo = showFrom + perPage;

        items.hide() // first hide everything, then show for the new page
             .slice(showFrom, showTo).show();
    }
});



// EDIT: extra stuff to cover url fragments (i.e. #page-3)
// https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment
// is more thoroughly commented (to explain the regular expression)

// we'll create a function to check the url fragment and change page
// we're storing this function in a variable so we can reuse it
var checkFragment = function() {
    // if there's no hash, make sure we go to page 1
    var hash = window.location.hash || (myPageName+"1");

    // we'll use regex to check the hash string
    var re = new RegExp("^"+myPageName+"(\\d+)$");
    hash = hash.match(re);

    if(hash)
        // the selectPage function is described in the documentation
        // we've captured the page number in a regex group: (\d+)
        jQuery(pagination_placeholder_selector).pagination("selectPage", parseInt(hash[1]));
};

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

// and we'll also call it to check right now!
checkFragment();

}

【讨论】：

【解决方案5】：

先添加：

<script type="text/javascript" src="mio_path_js/jquery.js"></script>
<script type="text/javascript" src="mio_path_js/jquery.simplePagination.js"></script>

<link type="text/css" rel="stylesheet" href="mio_path_css/simplePagination.css"/>

之后，对于 10 个元素调用 Ajax 函数为：

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

或者如果你想加载所有元素：

$.ajax({ …… …… 成功：函数（响应，状态，xhr）{ jQuery（函数（$）{ var pageParts = $(".paginate"); var numPages = countSelect; var perPage = 10; pageParts.slice(perPage).hide();

        $("#page-nav").pagination({
        items: numPages,
        itemsOnPage: perPage,
        cssStyle: "light-theme",
        currentPage: numeroSelezionato,
            onPageClick: function(pageNum) {
                $("#myModalWaiting").show();
                var start = perPage * (pageNum - 1);
                var end = start + perPage;
                cambiaPagina(start,end,pageNum);
                numeroSelezionato = pageNum;
            }
        });
    });
}

)};

Html 代码是：

<table>
    <tr>
        <th>
            <td>
                ............
                ...............
                .................
            </td>
        </th>
     </tr></table>
<div id="id_paginator"></div>

有关其他 Jquery simplePagination 示例，请参阅here。

【讨论】：

【解决方案6】：

以下代码对我有用：

function paginationTable() {

    var items = $("table tbody tr");
    var tablaeBody = $("table tbody");
        var numItems = items.length;
        var perPage = 20;

        // Only show the first 20 (or first `per_page`) items initially.
        tablaeBody.html(items.slice(0,20));
        // 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;

                tablaeBody.html(items.slice(showFrom,showTo));

            }
        });
}

在准备好 HTML 表格后调用此函数。

【讨论】：