0

主な編集

それで、私は今それを機能させています。jQuery.noConflict ステートメントを使用して、jQuery Pagination Plugin の 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 がページに渡されるのを待っている間にスニペットを読み込みます。私の問題は、ページネーションオプションを変更できることです。デフォルトでは、3 つの結果のみが表示されます。1 ページあたり 10 件の結果を表示したい。items_per_page を変更しようとすると、ページネーションが消え、スニペットの結果のみが表示されます。10を表示してページネーションすることは可能ですか? 結果が 10 件未満の場合はどうなりますか?

前もって感謝します！

元の質問

だから、これは別のn00bの質問です。これを行う最善の方法がPHPまたはjQueryのどちらを使用するかはわかりませんか? jQuery の記述は基本的に存在しませんが、少なくとも jQuery を読むことはできますが、PHP の理解はかなり向上しています。

基本的に、全体的なdiv idラップ内のdivクラス項目の「リスト」に変換されるJSONオブジェクトがあります。結果をページ付けできるようにする必要があります。ここにある例は 10 個のアイテムしかありませんが、250 個のアイテムを返すオブジェクトが 1 つあります。

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を使用しようとしましたが、実際にスクリプトを回避できませんか?

私は本当にスクリプトや他のクライアント側言語の学習を始めたばかりです...しかし、少し深いところに投げ込まれたので、どんな助けも大歓迎です。

ありがとう！！

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 に答える