jQuery分页插件

Posted 2023-03-10

【中文标题】jQuery分页插件

【英文标题】：jQuery Pagination Plugin

【发布时间】：2010-12-04 03:15:39

【问题描述】：

希望这很容易解决。我在理解 jQuery Pagination 插件时遇到了一些问题。

基本上，我要做的就是加载一个 php 文件，然后对结果进行分页。我试图摆脱他们的榜样，但我没有得到我正在寻找的结果。

这是 javascript：

 function pageselectCallback(page_index, jq)
            var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
            $('#Searchresult').empty().append(new_content);
            return false;
        
        function initPagination() 
            var num_entries = $('#hiddenresult div.result').length;
            // Create pagination element
            $("#Pagination").pagination(num_entries, 
                num_edge_entries: 2,
                num_display_entries: 8,
                callback: pageselectCallback,
                items_per_page:3
            );
               
        $(document).ready(function()      
            $('#hiddenresult').load('load.php', null, initPagination);
        );      

这是我的 html（在加载 PHP 之后）：

        <div id="Pagination" class="pagination"> </div>
        <br style="clear:both;" />
        <div id="Searchresult"> </div>

       <div id="hiddenresult" style="display:none;"> 
         <div class="result">Result #1</div>
         <div class="result">Result #2</div>
         <div class="result">Result #3</div>
         <div class="result">Result #4</div>
         <div class="result">Result #5</div>
         <div class="result">Result #6</div>
         <div class="result">Result #7</div>
       </div>

基本上，我试图每页显示“3”个项目，但这不起作用。我假设在某个地方，我将需要在我的 JS 中创建一个 for 循环，但我对如何做到这一点感到困惑。 The documentation can be found here.

【问题讨论】：

嘿，伙计们，我和你有同样的问题，但我试着在这里做所有的脚本，但我已经完成了希望这对你的问题有帮助bit.ly/free-pagination它只是自定义脚本而不是插件，但真的很有用跨度>

【参考方案1】：

您甚至不需要使用 for 循环，只需使用 jQuery 的 slice() 方法和一些数学运算即可。

我在 JS Bin 上主持了一个工作演示：http://jsbin.com/upuwe（可通过 http://jsbin.com/upuwe/edit 编辑）

这是修改后的代码：

var pagination_options = 
  num_edge_entries: 2,
  num_display_entries: 8,
  callback: pageselectCallback,
  items_per_page:3

function pageselectCallback(page_index, jq)
  var items_per_page = pagination_options.items_per_page;
  var offset = page_index * items_per_page;
  var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
  $('#Searchresult').empty().append(new_content);
  return false;

function initPagination() 
  var num_entries = $('#hiddenresult div.result').length;
  // Create pagination element
  $("#Pagination").pagination(num_entries, pagination_options);

【讨论】：

布莱恩，太棒了。非常感谢您指出 slice() 方法！

@brainpeiris 我正在努力使用分页插件***.com/questions/2505435/… 和***.com/questions/2523075/…