Problem with amount of rows displayed.
Problem with amount of rows displayed.
Hi
I'm doing server-side processing, this is the initialization
[code]
oTable = $('#example').dataTable( {
"sDom": 'R<"H"<"dtHead">lfr>t<"F"ip>',
"bProcessing": true,
"bAutoWidth": false,
"bServerSide": true, // needed for passing variables?
"sAjaxSource": '/index.php/mygroups/getindividualconsump',
// need to pass 2 variables.
// var type = 1 means its a groupId, 2 means its a userId
// var dtId = either a groupId or a userId
// groupId on page load, get from select value for group.
// if user is changed using datatable title dropdown, pass a userId
// if the group is changed using the group dropdown, pass a groupId.
//"aaData" is the array returned via ajax. Array of objects, use database/getglobal example.
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender, name/value pairs passed with GET */
aoData.push( { "name": "dtType", "value": dtType } );
aoData.push( { "name": "dtId", "value": dtId } );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
} );
},
// need to specify an array of objects is being returned with mDataProp for each column
"aoColumns": [ { "mDataProp": "id", "sTitle": "Consid", "bSortable": false, "bSearchable": false, "bVisible": false },
{ "mDataProp": "shortdatetime", "sTitle": "Time", "sWidth": "9%", "bSortable": true, "bSearchable": false },
{ "mDataProp": "concfood", "sTitle": "Food", "sWidth": "23%", "bSortable": true },
{ "mDataProp": "ftype", "sTitle": "F.G.", "sWidth": "4%", "bSortable": false},
{ "mDataProp": "name", "sTitle": "Food Group Description", "bSortable": false, "bSearchable": true, "bVisible": false },
{ "mDataProp": "consume", "sTitle": "Consumed", "sWidth": "14%", "bSortable": true },
{ "mDataProp": "comb", "sTitle": "Comb", "bSortable": false, "bSearchable": false, "bVisible": false },
{ "mDataProp": "cal", "sTitle": "Cal", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "fat", "sTitle": "Fat", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "sat", "sTitle": "Sat", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "trans", "sTitle": "Trans", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "chol", "sTitle": "Chol", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "sod", "sTitle": "Sod", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "carb", "sTitle": "Carb", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "fib", "sTitle": "Fib", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "sug", "sTitle": "Sug", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "pro", "sTitle": "Pro", "sWidth": "5%", "bSearchable": false, } ],
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"aaSorting": [],
"bjQueryUI": true,
"iDisplayLength": 10
});
[/code]
The table loads the data fine, but instead of just showing 10 rows it shows all 200. It says at the bottom showing 1 to 10 of 200 but its actually showing 200. The JSON returned contains in addition to aaData:
iTotalRecords 200
iTotalDisplayRecords 200
sEcho 1
10
});
[/code]
I'm doing server-side processing, this is the initialization
[code]
oTable = $('#example').dataTable( {
"sDom": 'R<"H"<"dtHead">lfr>t<"F"ip>',
"bProcessing": true,
"bAutoWidth": false,
"bServerSide": true, // needed for passing variables?
"sAjaxSource": '/index.php/mygroups/getindividualconsump',
// need to pass 2 variables.
// var type = 1 means its a groupId, 2 means its a userId
// var dtId = either a groupId or a userId
// groupId on page load, get from select value for group.
// if user is changed using datatable title dropdown, pass a userId
// if the group is changed using the group dropdown, pass a groupId.
//"aaData" is the array returned via ajax. Array of objects, use database/getglobal example.
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender, name/value pairs passed with GET */
aoData.push( { "name": "dtType", "value": dtType } );
aoData.push( { "name": "dtId", "value": dtId } );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
} );
},
// need to specify an array of objects is being returned with mDataProp for each column
"aoColumns": [ { "mDataProp": "id", "sTitle": "Consid", "bSortable": false, "bSearchable": false, "bVisible": false },
{ "mDataProp": "shortdatetime", "sTitle": "Time", "sWidth": "9%", "bSortable": true, "bSearchable": false },
{ "mDataProp": "concfood", "sTitle": "Food", "sWidth": "23%", "bSortable": true },
{ "mDataProp": "ftype", "sTitle": "F.G.", "sWidth": "4%", "bSortable": false},
{ "mDataProp": "name", "sTitle": "Food Group Description", "bSortable": false, "bSearchable": true, "bVisible": false },
{ "mDataProp": "consume", "sTitle": "Consumed", "sWidth": "14%", "bSortable": true },
{ "mDataProp": "comb", "sTitle": "Comb", "bSortable": false, "bSearchable": false, "bVisible": false },
{ "mDataProp": "cal", "sTitle": "Cal", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "fat", "sTitle": "Fat", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "sat", "sTitle": "Sat", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "trans", "sTitle": "Trans", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "chol", "sTitle": "Chol", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "sod", "sTitle": "Sod", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "carb", "sTitle": "Carb", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "fib", "sTitle": "Fib", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "sug", "sTitle": "Sug", "sWidth": "5%", "bSearchable": false, },
{ "mDataProp": "pro", "sTitle": "Pro", "sWidth": "5%", "bSearchable": false, } ],
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"aaSorting": [],
"bjQueryUI": true,
"iDisplayLength": 10
});
[/code]
The table loads the data fine, but instead of just showing 10 rows it shows all 200. It says at the bottom showing 1 to 10 of 200 but its actually showing 200. The JSON returned contains in addition to aaData:
iTotalRecords 200
iTotalDisplayRecords 200
sEcho 1
10
});
[/code]
This discussion has been closed.
Replies
sEcho 1
Updated to 1.8.2 and switched from using fnServerData to fnServerParams because the only server-side processing i wanted was to pass some more variables. Make sure bServerSide = false and use fnServerParams. I had bServerSide = true and I was pretty sure i was returning all of the necessary JSON for that but for some reason it refused to work. Something to do with filtering not taking place because i had no filtering in the php. The only filtering i wanted was to limit the amount of rows displayed, but guess i don't know how to do this with server-side php