Server-Side Processing Not Working With Twitter Bootstrap Themed DataTable

Chris555

Hi Allen, etc. al.,

I am mocking a server-side call using Mockjax and MockJson with a Twitter Bootstrap themed data table. My mock json package appears fine, however, data never binds to the DataTable. After a day of reviewing the docs and forum threads, I still don't see what the problem is. My code is below for review. Thank you in advance for any assistance you can provide.

[code]
/* Mock Data
---------------------------------------------*/
$.mockjaxSettings = {
status: 200,
responseTime: 300,
isTimeOut: false,
contentType: 'application/json; charset=utf-8',
response: '',
responseText: '',
responseXml: '',
proxy: '',
lastModified: null,
etag: ''
}
$.mockjax({
url: 'http://api.gravycard.com/v1/promoter/emp/history.json' ,
dataType: 'json',
responseText: $.mockJSON.generateFromTemplate({
'aaData|50-50': [{
'empName': '@FEMALE_FIRST_NAME' + ' ' + '@LAST_NAME',
'empTitle|10-30': '@LETTER_UPPER',
'empTelephone|10-10': '@NUMBER',
'empRole|10-10': '@LOREM_IPSUM',
'empNumPromos|1-3': '@NUMBER'
}],
'sEcho': 1,
'iTotalRecords': 50,
'iTotalDisplayRecords': 50
})
});

$(function() {
$.getJSON("http://api.gravycard.com/v1/promoter/emp/history.json", function(data) {
alert(JSON.stringify(data));
});

$('#dynamicTbl').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"bPaginate": true,
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "" // Empty $ = Disable 'Records per page Selector'
},
"bInfo": true,
"bFilter": false, // Disable searching
"iDisplayLength": 10,
// Ajax related settings
"bServerSide": true,
"sServerMethod": "POST",
"bProcessing": true,
"sAjaxSource": "http://api.gravycard.com/v1/promoter/emp/history.json",
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
"dataType": "json",
"contentType": "application/json; charset=utf-8",
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"aoColumns": [
{"sName": "Name", "mData": "empName"},
{"sName": "Title", "mData": "empTitle"},
{"sName": "Telephone", "mData": "empTelephone"},
{"sName": "Role", "mData": "empRole"},
{"sName": "Promotion(s)", "mData": "empNumPromos"}
]
});

}());
[/code]

girishmr

Should this be

[code]
"success": fnCallback(data)
[/code]

instead of just fnCallback !

Also you might have to set bRetrieve to true since you have enabled server side

Allan,
Correct me if I am wrong

allan

Hmm - not sure about that one actually :-). I think giving `fnCallback` as a function to `success` is correct.

@Chris555 - Please post a link to a page showing the issue so we can debug it.

Allan

Chris555

I got it working using the revised code below. Didn't fully understand binding as it relates to server-side processing.

[code]
/* Mock Data
---------------------------------------------*/
$.mockjaxSettings = {
status: 200,
responseTime: 300,
isTimeOut: false,
contentType: 'application/json; charset=utf-8',
response: '',
responseText: '',
responseXml: '',
proxy: '',
lastModified: null,
etag: ''
}
$.mockjax({
url: 'http://api.gravycard.com/v1/promoter/emp/history.json' ,
dataType: 'json',
responseText: $.mockJSON.generateFromTemplate({
'aaData|50-50': [{
'empName': '@FEMALE_FIRST_NAME' + ' ' + '@LAST_NAME',
'empTitle|10-30': '@LETTER_UPPER',
'empTelephone|10-10': '@NUMBER',
'empRole|10-10': '@LETTER_LOWER',
'empNumPromos|1-3': '@NUMBER'
}],
'sEcho': 1,
'iTotalRecords': 100,
'iTotalDisplayRecords': 100
})
});

$(document).ready(function() {
$('#dynamicTbl').dataTable( {
"aoColumns": [
{"sName": "Name", "mData": "empName", "bSortable": true},
{"sName": "Title", "mData": "empTitle", "bSortable": true},
{"sName": "Telephone", "mData": "empTelephone", "bSortable": true},
{"sName": "Role", "mData": "empRole", "bSortable": true},
{"sName": "Promotion(s)", "mData": "empNumPromos", "bSortable": true}
],
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"bPaginate": true,
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "" // Empty $ = Disable 'Records per page Selector'
},
"bInfo": true,
"bFilter": false, // Disable searching
"iDisplayLength": 10,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://api.gravycard.com/v1/promoter/emp/history.json",
"fnServerData": fnDataTablesPipeline
} );
} );
[/code]

However, with this said I am unable to get the next chunk of paginated data (pipe-size = 3). I would guess it is due to my lack of full understanding of the DataTables API. So how do I get the next chunk and display it in DataTables? Thanks.

allan

Since you are using server-side processing, have you fully implemented the server-side processing protocol in your server-side script? http://datatables.net/usage/server-side

Allan