0

主要编辑

所以我现在让它工作了，嗯，有点。我需要使用带有 jQ​​uery.noConflict 语句的 jQuery 分页插件中的 AJAX 示例。这是代码：

            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 个会怎样？

提前致谢！

原始问题

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

基本上，我有一个 JSON 对象，它被转换为整个 div id 包装内的 div 类项目的“列表”。我需要能够对结果进行分页。我在这里的示例只有 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 分页插件，但我真的无法绕过那里的脚本？

我真的刚刚开始学习脚本和其他客户端语言......虽然有点深入人心，所以任何帮助都将不胜感激。

谢谢！！

4

2 回答 2

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();
            });
于 2013-10-25T14:39:05.643 回答
0

如果您查看演示示例 (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
            });
});

希望这有帮助

于 2013-10-17T10:12:46.383 回答