DataTables logo DataTables

Pagination always says 1 page
  • SOLVED MY OWN PROBLEM, see follow up comment for explanation

    I trying to use DataTables 1.9.1.

    I have a MongoDB collection with a number of items in it and I'm trying to get them to display in paginated blocks of 5.

    The DataTable renders correctly and shows 5 records. The info section under the DataTable tells me it's showing items 1-5 and they are filtered from a set of 12 total entries (which is correct, there's 12 test items in the DB collection for now). But the pagination section shows the following buttons:

    First
    Previous
    Page 1
    Next
    Last

    Clicking these pagination buttons does nothing. What could be wrong?
    Also, why is it not generating buttons for Page 2 and Page 3?
    I added the class 'example_alt_pagination' to the body tag as a sample of full_numbers pagination mentioned.
    I can click the header row and sort the data using the server side processing logic I have written so I doubt the problem is in the JSON I'm returning.

    I also tried two_button pagination but both the back and forward buttons are always disabled and grayed out.

    Any feedback on this is greatly appreciated.

    Here's my HTML table
    <table id="productListTable" class="display">
        <thead>
            <tr>
                <th class="colID">ID</th>
                <th class="colSKU" width="10%">SKU</th>
                <th class="colName" width="40%">Name</th>
                <th class="colBasePrice" width="10%">Base Price</th>
                <th class="colTaxPrice" width="10%">Tax Price</th>
                <th class="colTotalPrice" width="10%">Total Price</th>
                <th class="colWeight" width="10%">Weight</th>
                <th class="colEnabled" width="10%">Enabled</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>SKU</th>
                <th>Name</th>
                <th>Base Price</th>
                <th>Tax Price</th>
                <th>Total Price</th>
                <th>Weight</th>
                <th>Enabled</th>
            </tr>
        </tfoot>
    </table>
    

    Here's my JS code to initialize the table inside the jQuery document ready event handler.
    $('table#productListTable').dataTable({
        'bProcessing': true,
        'bServerSide': true,
        'sAjaxSource': '/api/product/list',
        'sPaginationType': 'full_numbers',
        'bAutoWidth': false,
        'iDisplayLength': 5,
        'aLengthMenu': [
            [5, 10, 25, 50, 100, -1],
            [5, 10, 25, 50, 100, "All"]
        ],
        'oLanguage': {
          'sSearch': 'Search by Name:'
        },
        'aoColumnDefs': [
            {
                'bVisible': true,
                'mDataProp': 'id',
                'aTargets': ['colID']
            },
            {
                'mDataProp': 'sku',
                'aTargets': ['colSKU']
            },
            {
                'mDataProp': 'name',
                'aTargets': ['colName']
            },
            {
                'mDataProp': null,
                'fnRender': function(obj) {
                    return "$ " + parseFloat(obj.aData['basePrice']).toFixed(2);
                },
                'aTargets': ['colBasePrice'],
                'sClass': 'alignRight'
            },
            {
                'mDataProp': null,
                'fnRender': function(obj) {
                    return "$ " + parseFloat(obj.aData['taxPrice']).toFixed(2);
                },
                'aTargets': ['colTaxPrice'],
                'sClass': 'alignRight'
            },
            {
                'mDataProp': null,
                'bSortable': false,
                'fnRender': function(obj) {
                    return "$ " + parseFloat(obj.aData['basePrice'] + obj.aData['taxPrice']).toFixed(2);
                },
                'aTargets': ['colTotalPrice'],
                'sClass': 'alignRight'
            },
            {
                'mDataProp': null,
                'fnRender': function(obj) {
                    return parseFloat(obj.aData['weight']).toFixed(2) + " lbs";
                },
                'aTargets': ['colWeight'],
                'sClass': 'alignRight'
            },
            {
                'mDataProp': 'enabled',
                'aTargets': ['colEnabled'],
                'sClass': 'alignCenter'
            }
        ]
    });
    

    Here's the JSON returned by the server when DataTables calls the ajax source URL.
    {
        "iTotalDisplayRecords":5,
        "iTotalRecords":12,
        "aaData":[
            {
                "id":"4f9df0753e6c0bd417000000",
                "enabled":true,
                "weight":0.5,
                "name":"Item 1",
                "taxPrice":2.5,
                "sku":"B1",
                "basePrice":1
            },
            {
                "id":"4f9e3e8a3e6c0ba804000000",
                "enabled":true,
                "weight":0.5,
                "name":"Item 2",
                "taxPrice":2.5,
                "sku":"B2",
                "basePrice":2
            },
            {
                "id":"4f9e3e8f3e6c0b1408000000",
                "enabled":true,
                "weight":0.5,
                "name":"Item 3",
                "taxPrice":0.5,
                "sku":"B3",
                "basePrice":3
            },
            {
                "id":"4f9e3e913e6c0be814000000",
                "enabled":true,
                "weight":0.5,
                "name":"Item 4",
                "taxPrice":2.5,
                "sku":"B4",
                "basePrice":4
            },
            {
                "id":"4f9e3e933e6c0b3417000000",
                "enabled":true,
                "weight":0.5,
                "name":"Item 5",
                "taxPrice":2.5,
                "sku":"B5",
                "basePrice":5
    	}
        ],
        "sEcho":"1"
    }
    
  • And I just solved my own problem. After further reading the server side processing sample PHP see I was giving the wrong value for iTotalDisplayRecords in my JSON response. Instead of it being the length of the paginated data block (in my case 5) it needs to be the length of the query results as if no limit was applied.
This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.