javascript - 如何使用 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>

*注意：在上面的代码中，我将类 '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'
    });
});

1. 我应该用类名替换“选择器”吗？如果是，我该怎么做？
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（如果您想要 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();



});

如果您想更彻底地了解这一切实际上是如何工作的，您可以在此处找到一个运行示例，并在此处找到有关 simplePagination 的更详尽指南。

编辑：添加了一段代码来处理 URL 片段（在重新加载和后退/前进时），因为 Mike O'Connor 强调了这一点。您可以在此处查看URL 片段处理的实时示例。

编辑 2：如果您需要跨浏览器的向后/向前片段更新兼容性（即 IE11...），请在实现上述代码之前包含History.js脚本。感谢迈克·奥康纳 :)

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

Answer 2

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

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 为空，则函数返回 1，对于第 1 页---不为空。

现在还有另一个步骤，那就是武器化 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”位只是为了调整分页栏中的指示。

好的，这是 2/16/2015 的编辑...显示评论中讨论的 IE11 问题的修复。我没有编辑上面的代码，因为也许你不想以这种方式进行修复，尽管它似乎确实有效。

首先转到这个 github 项目，然后为文件键入“t”（哈哈！），然后单击 history.min.js，然后单击 Raw 按钮并在浏览器中执行 SaveAs。因此，您将使用该 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 一起放入。然后后退箭头将起作用。

Answer 3

以下代码对我有用：

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 表格后调用此函数。

Answer 4

我测试了 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();



});

Answer 5

当我通过 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();

}

Answer 6

首先添加：

<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({ ...... ...... 成功: function (response, status, xhr) { jQuery(function($) { 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 示例，请参见此处。

或者要加载更多元素： https ://lentux-informatica.com/paginazione-liste-con-jquery-parte-2-2-simplepagination-js/