如何使用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();



});

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

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

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

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

Answer 2

好的，我已经测试了Bilal Akil的jQuery（功能（$），这对我来说是一个好的开始 - 感谢Bilal。它有效，但有一些不足之处。一，如果你去了到his first link并点击第2页，然后该号码会在＃34; http://bilalakil.github.io/bin/simplepagination/#page-2＆＃34; ---＃page-2中显示在位置框中。但如果您复制整个网址并将其粘贴到另一个标签或窗口的位置框中，以模拟链接到第2页的人，然后它就无法正常工作;您将在第1页找到自己。或者在您点击页面后2按钮并转到第2页，您只需重新加载页面;您将在第1页找到自己。

我会评论，但我需要在这里留下一些代码。这是我修改过的jQuery（函数（$），修复了该特定问题：

  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，一个＆lt; tr＆gt;每页，但重要的区别是这一行：

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并在其他地方启动它们并且它们可以工作。前进和后退按钮工作。请注意＆＃39; drawPage＆＃34;上面代码中的位只是调整分页栏中的指示。

好的，这是2015年2月16日的编辑...以显示注释中讨论的IE11问题的修复程序。我没有编辑上面的代码，因为也许你不想以这种方式进行修复，尽管它看起来确实有效。

首先转到this github project然后输入＆＃34; t＆＃34;对于文件（哈！）并单击history.min.js然后在Raw按钮上并在浏览器中执行SaveAs。因此，您将使用该JavaScript库，该库有效地为不会提升它们的浏览器创建popstate事件（和其他事件）。

现在，在上面的代码中删除window.onpopstate = function（e）{}但保存其代码块并将其插入jQuery的末尾（函数（$），就在$（＆＃39;＃）之后分页＆＃39;）。分页（＆＃39; drawPage＆＃39;，hashPageNum）;,如下：

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

编辑我必须补充说，如果你在你的网站上放置一个这样分页的页面的链接 - 例如，你的主页可能在菜单中有一些锚点转到你的某些分页页面---那么如果你把target =＆＃34; _blank＆＃34;在链接和href放到www.yourdomain.com/yourpaginatedpage，一切都会好的。这样会很好，因为您不会尝试使用浏览器上的后退箭头返回主页，因为分页页面将作为新选项卡或新窗口打开。

但是......如果你离开目标=＆＃34; _blank＆＃34;因此，在同一窗口中打开分页页面，您会发现后退按钮不起作用。当您按下后退箭头时，会看到历史记录（实际上它是错误的，因为有两个您的标签页的列表）但没有点击箭头会导致它工作。

治愈只是将www.yourdomain.com/yourpaginatedpage#page-1作为您的href ...使用＃page-1。然后后退箭头将起作用。

Answer 3

我测试了Bilal Akil的jQuery（函数（$）），我发现了一个我想纠正的错误 - 并且感谢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 4

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

textView.setText(Html.fromHtml("unicode_character");

}

Answer 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（function（$）{         var pageParts = $（＆＃34; .paginate＆＃34;）;         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。

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

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