jQuery 分页插件 [英] jQuery Pagination Plugin

问题描述

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

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

这是 JavaScript:

 函数 pageselectCallback(page_index, jq){var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();$('#Searchresult').empty().append(new_content);返回假；}函数 initPagination() {var num_entries = $('#hiddenresult div.result').length;//创建分页元素$("#Pagination").pagination(num_entries, {num_edge_entries: 2,num_display_entries: 8,回调:页面选择回调，items_per_page:3});}$(document).ready(function(){$('#hiddenresult').load('load.php', null, initPagination);});

这是我的 HTML(在 PHP 加载后):

 
<br style="clear:both;"/><div id="搜索结果">

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

基本上，我试图每页显示3"个项目，但这不起作用.我假设在某个地方，我需要在我的 JS 中创建一个 for 循环，但我对如何这样做感到困惑.文档可以在这里找到.

解决方案

你甚至不需要使用 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,回调:页面选择回调，items_per_page:3}函数 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);返回假；}函数 initPagination() {var num_entries = $('#hiddenresult div.result').length;//创建分页元素$("#Pagination").pagination(num_entries, pagination_options);}

Hopefully this is something that will be easy to remedy. I'm having a bit of an issue understanding the jQuery Pagination plugin.

Essentially, all I am trying to do is load a PHP file, and then paginate the results. I'm attempting to go off their example, but I am not yielding the results I'm looking for.

Here's the 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);
        });      

Here's my HTML (after the PHP has been loaded):

        <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>

Basically, I am trying to show "3" items per page, but this is not working. I'm assuming that somewhere, I am going to need to create a for loop in my JS, but I'm confused on how to do so. The documentation can be found here.

解决方案

You don't even need to use a for loop, just use jQuery's slice() method and a bit of math.

I've hosted a working demo on JS Bin: http://jsbin.com/upuwe (Editable via http://jsbin.com/upuwe/edit)

Here's the modified code:

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);
}

这篇关于jQuery 分页插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！