Question

In the jQuery plugin, jPaginate, the number of child objects is always returning the value of 1 determined by this code (lines 45-48 in jPaginate.js):

//getting the amount of elements inside parent element
var number_of_items = obj.children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);

I call the script in the header in the document.ready function:

$("#content").jPaginate({
items: 4,
pagination_class: "pagination",
minimize: true                    
});

and I wrapped a div with id=”content” around the table rows I want paginated like this:

    <div id="content">
        <table class="stripeMe center box-shadow-inner">
            <?php foreach ($invoices as $invoice) { ?>
                <tr>
                    <td>
                        <a href='<?php echo $_SERVER['PHP_SELF']; ?>/retrieve?class=InvoiceLineItems&amp;id=<?php echo $invoice['invoice_id']; ?>'><?php echo $invoice['invoice_number']; ?></a>&nbsp;<?php echo $invoice['customer_name'] ?>&nbsp;<?php echo $invoice['invoice_date'] ?> 
                    </td>
                </tr>   
            <?php } ?>    
        </table>
    </div>

What I get is one long page of records, with the pagination selector set to ‘previous’ 1 ‘next’. I tripled check, removed & replaced, and debugged the code as best I could. I still cannot determine why number_of_items gets set to 1.

Any help is appreciated.
Thanks.

Answer 1

The answer is due to the selector.

var number_of_items = obj.children().size();

The obj is #content which your are passing to the plugin. So obj.children() is only returning the first child, table, within the obj. Since there is only one item in the array it has a size of 1.