Question

MAJOR EDIT

所以我现在就开始工作，好吧，等等。我需要使用jQuery Pagination Plugin中的AJAX示例和jQuery.noConflict语句。这是代码：

            jQuery.noConflict()(function($){
        function pageselectCallback(page_index, jq){
            var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
            $('#Searchresult').empty().append(new_content);
            return false;
        }

        /** 
         * Callback function for the AJAX content loader.
         */
        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:1
            });
         }

        // Load HTML snippet with AJAX and insert it into the Hiddenresult element
        // When the HTML has loaded, call initPagination to paginate the elements        
        $(document).ready(function(){      
            $('#hiddenresult').load('snippet.html', null, initPagination);
        });
        });

这很好用，它在等待JSON传递给页面时加载一个片段。我现在的问题是我可以改变分页选项。默认情况下仅显示三个结果。我想每页显示10个结果。如果我尝试更改items_per_page，则分页会消失，只会显示代码段结果。是否可以显示10和分页？如果少于10个结果会怎样？

提前致谢！

ORGINAL QUESTION

所以这是另一个n00b问题，我不确定这样做的最佳方法是使用PHP还是jQuery？我至少可以阅读jQuery，即使我对它的写作基本上是不存在的，但我的PHP理解变得更好，同样，没有写作。

基本上我有一个JSON对象，它被转换为整个div id包中div类项的'list'。我需要能够对结果进行分页。我这里的例子只有10个项目，但我有一个对象返回250个项目。

返回JSON的jQuery正在开发中，现在只是为了让它在同一页面中进行分页。

目前HTML输出如下所示：

<body>
<div class="container">
  <div id="dealer_limpopo">
    <div class="dealer">
        <dl>
            <dt>
                Company Name
            </dt>
            <dd>
                Cable-Tech
            </dd>
            <dt>
                Company Description
            </dt>
            <dd>
                Computer &amp; Software Sales Licensing Network Infrasture Solutions
            </dd>
            <dt>
                Email Address
            </dt>
            <dd>
                Isaacm@cable-tech.co.za
            </dd>
            <dt>
                Contact Number
            </dt>
            <dd>
                084 688 9457
            </dd>
            <dt>
                Website URL
            </dt>
            <dd>
                http://www.cable-tech.co.za
            </dd>
            <dt>
                City
            </dt>
            <dd>
                Polokwane
            </dd>
            <dt>
                Physical Address
            </dt>
            <dd>
                Factory 39/No.06, Freedom Drive, Industrial Area, Seshego, 0742
            </dd>
        </dl>
    <p></p>
    </div>
    <div class="dealer">
                 .....
    </div>
    <div class="dealer">
                 .....
    </div>
    <div class="dealer">
                 .....
    </div>
    <div class="dealer">
                 .....
    </div>
    <div class="dealer">
                 .....
    </div>
    <div class="dealer">
                 .....
    </div>
    <div class="dealer">
                 .....
    </div>
    <div class="dealer">
                 .....
    </div>
    <div class="dealer">
                 .....
    </div>
    <div class="dealer">
                 .....
    </div>
    </div>
 </div>

您可以在http://thegearbox.co/thisisatest/

看到该页面

问题是？如何对结果进行分页？我曾尝试使用jQuery Pagination Plugin，但我真的无法绕过那里的剧本？

我真的只是开始学习脚本和其他客户端语言......虽然有点被抛到深处，所以任何帮助都会受到大力赞赏。

谢谢！

Answer 1

例如：每页有2个项目，分页有3个链接：

function pageselectCallback(page_index, jq){
                $('#Searchresult').empty();
                // replace "2" per the item_per_page value in the "for" statement below
                for(var i=page_index*2;i<((page_index*2)+2);i++) {
                    var new_content = jQuery('#hiddenresult div.result:eq('+i+')').clone();
                    $('#Searchresult').append(new_content);
                }
                return false;
            }
            /** 
             * Initialisation function for pagination
             */
            function initPagination() {
                // count entries inside the hidden content
                var num_entries = jQuery('#hiddenresult div.result').length;
                // Create content inside pagination element
                $("#Pagination").pagination(num_entries, {
                    callback: pageselectCallback,
                    items_per_page:2, // Show only 2 item per page
                    num_edge_entries:3, // 3 pager links
                });
             }
 // When document is ready, initialize pagination
            $(document).ready(function(){      
                initPagination();
            });

Answer 2

如果您查看演示示例（demo.htm），您必须将每个示例放入 '<div class="dealer">' 进入另一个div。像这样：

<div id="hiddenresult" style="display:none;"><div class="dealer">...</div><div class="dealer">...</div> ...</div>

然后添加一个显示页面内容的div。像这样：

<div id="Searchresult">Your page content will be displayed here</div>

然后添加div，显示您的分页：

<div id="Pagination"></div>

在您的javascript部分中添加以下代码：

// the function called for each click on a pager item
function pageselectCallback(page_index, jq){
                // find the next element to display in '#hiddenresult' div
                var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();

                // will add the next content to the '#Searchresult' div
                $('#Searchresult').empty().append(new_content);
                return false;
            }

$(document).ready(function(){ 
           // num_entries is the number of 'dealer' object you will use
           $("#Pagination").pagination(num_entries, {
                    callback: pageselectCallback,
                    items_per_page:1 // Show only one item per page
            });
});

希望这个帮助

从多个div类中分页

2 个答案: