Pagination always says 1 page

jhw1701

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
[code]



ID
SKU
Name
Base Price
Tax Price
Total Price
Weight
Enabled






ID
SKU
Name
Base Price
Tax Price
Total Price
Weight
Enabled



[/code]

Here's my JS code to initialize the table inside the jQuery document ready event handler.
[code]
$('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'
}
]
});
[/code]

Here's the JSON returned by the server when DataTables calls the ajax source URL.
[code]
{
"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"
}
[/code]

jhw1701

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.