Pagination size did not set when ajax call is established

[ranonengineer]

jQuery Version: 1.12.4 tablesorter Version: 2.31.3

I've looked around through different forums about this specific issue: pagination size did not assign properly after ajax call is completed.

Here's the JS references:

<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.pager.min.js"></script>
<script src="/js/pager-custom-controls.js"></script>

Here's the piece of code:

<script>
                $(function() {
                    var itemTable = $('#itemTable');
                    var itemPager = $('#itemPager');
                    var getItem = <?=json_encode($getItem)?>;

                    $.tablesorter.customPagerControls({
                        table          : itemTable,              // point at correct table (string or jQuery object)
                        pager          : itemPager,              // pager wrapper (string or jQuery object)
                        pageSize       : '.left a',                // container for page sizes
                        currentPage    : '.right a',               // container for page selectors
                        ends           : 2,                        // number of pages to show of either end
                        aroundCurrent  : 1,                        // number of pages surrounding the current page
                        link           : '<a href="#">{page}</a>', // page element; use {page} to include the page number
                        currentClass   : 'current',                // current page class name
                        adjacentSpacer : '<span> | </span>',       // spacer for page numbers next to each other
                        distanceSpacer : '<span> &#133; <span>',   // spacer for page numbers away from each other (ellipsis = &#133;)
                        addKeyboard    : false,                    // use left,right,up,down,pageUp,pageDown,home, or end to change current page
                        pageKeyStep    : 10                        // page step to use for pageUp and pageDown
                    });

                    itemTable.tablesorter({
                        theme: 'rpp',
                        widgets: ['zebra'],
                        sortReset: true,
                        sortRestart: true
                    }).tablesorterPager({
                        // target the pager markup - see the HTML block below
                        container: itemPager,
                        ajaxUrl: 'dbitem.php?item='+getItem,
                        // use this option to manipulate and/or add additional parameters to the ajax url
                        customAjaxUrl: function(table, url) {
                        // manipulate the url string as you desire
                        // url += '&currPage=' + window.location.pathname;

                        // trigger a custom event; if you want
                        //$(table).trigger('changingUrl', url);
                        // send the server the current page
                        return url;
                        },
                        ajaxError: null,
                        ajaxObject: {
                            type: 'GET', // default setting
                            dataType: 'json'
                        },
                        ajaxProcessing: function(data) {
                            if (data) {
                                var r;
                                var row;

                                var total = data.length;
                                var rows = [];

                                var date;
                                var event;
                                var item;
                                var looter;
                                var note;
                                var cost;
                                var displayNote;
                                for ( r=0; r < total; r++ ) {
                                    date = data[r]['date'];
                                    event = data[r]['event'];
                                    item = data[r]['item'];
                                    looter = data[r]['name'];
                                    note = data[r]['note'];
                                    cost = data[r]['spent'];
                                    row = [];

                                    displayNote = "";
                                    if(note !== null && note !== ''){
                                        displayNote = " | " + note;
                                    }

                                    row[0] = date;
                                    row[1] = event;
                                    row[2] = item;
                                    row[3] = "<a href='player_rpp.php?name='"+looter+"'>"+looter+"</a>"+displayNote;
                                    row[4] = cost;

                                    rows.push(row);
                                }
                                return [ total, rows ];
                            }
                        },
                        processAjaxOnInit: true,
                        size: 25,
                        savePages: false,
                        output: 'showing: {startRow} to {endRow} ({filteredRows})'
                    });
                });
            </script>

As you see, I've requested a limit of rows to 25 per page. It's not working. Am I missing something? Thanks in advance!

[ranonengineer]

Debugged enabled

Interesting... "size" selector not found.

[Mottie]

Hi @ranonengineer!

Yes, it looks like the HTML is missing. There is an example in the docs - https://mottie.github.io/tablesorter/docs/example-pager-ajax.html

[ranonengineer]

Good morning @Mottie!

I'm not sure what part I'm missing after I compared the differences between the example and my code. I do see cssPageSize in the example and I don't think that's required... is it?

HTML section:

<table id="itemTable" class="tablesorter">
                                    <thead>
                                        <tr>
                                            <td>Date</td>
                                            <td>Event</td>
                                            <td class="sorter-false">Item</td>
                                            <td>Looter</td>
                                            <td class="sorter-false">Cost</td>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                            <tr>
                                                <th>Date</th>
                                                <th>Event</th>
                                                <th>Item</th>
                                                <th>Looter</th>
                                                <th>Cost</th>
                                            </tr>
                                            <tr>
                                              <td colspan="5">
                                                <div id="itemPager" class="pager">
                                                  <nav class="right">
                                                    <span class="prev">
                                                      <img src="images/pager/icons/prev.png" /> Prev&nbsp;
                                                    </span>
                                                    <span class="pagecount"></span>
                                                    &nbsp;<span class="next">Next
                                                      <img src="images/pager/icons/next.png" />
                                                    </span>
                                                  </nav>
                                                </div>
                                              </td>
                                            </tr>
                                        </tfoot>
                                    <tbody>
                                        <?php                                            

                                            if($srItemCount > 0){
                                                 //ajax call will fill success result here
                                            }else{
                                                echo $sql_dbrpp->error;
                                                echo "<h3 style='margin-top:2rem;margin-bottom:0;'>No Item Results</h3>";
                                                echo "<p style='margin-top:0;' class='section-description'>Go ahead and type to search for the item from events!</p>";
                                            }
                                        ?>
                                    </tbody>
                                </table>