Reputation: 57

Paginating from multiple div classes

MAJOR EDIT

So I have it working now, well, sort of. I needed to use the AJAX example from the jQuery Pagination Plugin with a jQuery.noConflict statement. Here is the code:

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

This is working well, it loads a snippet while it waits for the JSON to be passed to the page. My problem now is I can change the pagination options. The default shows only three results. I want to show 10 results per page. If I try and change the items_per_page the pagination disappears and only the snippet result shows. Is it possible to show 10 and paginate? What happens if there are less that 10 results?

Thanks in advance!

ORGINAL QUESTION

So this is another n00b question and I am not sure if the best way to do this will be using PHP or jQuery? I can at least read jQuery, even if my writing of it is basically non-existant, but my PHP understanding is getting much better, again, no writing though.

Basically I have a JSON object that is being converted to a 'list' of div class items within an overall div id wrap. I need to be able to paginate the results. The example I have here is only 10 items but I have one object that is returning 250 items.

The jQuery returning the JSON is working spot on, now just to get it to paginate within the same page.

Currently the HTML output looks like this:

<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>
                [email protected]
            </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>

You can see the page live at http://thegearbox.co/thisisatest/

The question is? How does one paginate the results? I have tried to use jQuery Pagination Plugin but I really can't get around the script in there?

I really am just starting out learning scripting and other client side languages... Got tossed in the deep end a little though, so any help would be massively appreciated.

Thanks!!

Upvotes: 0

Answers (2)

Jacko07

Reputation: 119

Eg: To have 2 items per page and 3 links in pagination :

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

Upvotes: 1

Jacko07

Reputation: 119

If you look into the demo sample (demo.htm) you have to put each '<div class="dealer">' into an another div. Like this :

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

Then you add a div where you will display page content. Like this :

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

Then you add your div where your pagination will be displayed :

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

In you javascript section you add this code :

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

Hope this help

Upvotes: 0

Paginating from multiple div classes

Answers (2)

Related Questions