Retrieving new data from ajax source w/ server-side
Retrieving new data from ajax source w/ server-side
Viper
Posts: 9Questions: 0Answers: 0
Now I'm using server-side processing.
Code looks like
[code]var oTable;
jQuery(document).ready(function($){
oTable = $("#list").dataTable({
"bJQueryUI": true,
"bProcessing": true,
//"bStateSave": true,
"bServerSide": true,
"oLanguage": { "sUrl": "<?php echo JURI::base(); ?>components/com_cross/assets/js_libs/locale/dataTables-ru.json"},
"sAjaxSource": "index.php?option=com_cross&controller=frontpage&task=records&format=raw&cid=cid_1&place=1",
"aoColumns": [
{ "mDataProp": "cd_station_adr", "bSortable": false },
{ "mDataProp": "cd_phone", "bSortable": false },
{ "mDataProp": "cd_port", "bSortable": false },
{ "mDataProp": "cd_line_adr", "bSortable": false },
{ "mDataProp": "cd_user", "bSortable": false },
{ "mDataProp": "cd_desc", "bSortable": false }
],
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "400px"
});
});
function updateList(id, pid, obj){
jQuery(document).ready(function($){
$("html:not(:animated), body:not(:animated)").animate({ scrollTop: $("#cn_title").offset().top-5 });
$("#cn_list, #city_list").hide();
$("#ts_c").html($(obj).html());
$("#clear_c").show();
/*oTable.fnServerData(function(sSource, aoData, fnCallback){
alert("ok");
});*/
});
}[/code]
In updateList function I'm need to get new data from server with new parameters("cid" and "place" in request). I've read the thread about reloadAjaxSource plugin but this is usless for me. dataTables must not to be load all datas(more than one million rows) form DB.
Maybe exist more elegant way?
PS! Now i'm look on the fnServerData function, but how can I implement this in updateList function?
Code looks like
[code]var oTable;
jQuery(document).ready(function($){
oTable = $("#list").dataTable({
"bJQueryUI": true,
"bProcessing": true,
//"bStateSave": true,
"bServerSide": true,
"oLanguage": { "sUrl": "<?php echo JURI::base(); ?>components/com_cross/assets/js_libs/locale/dataTables-ru.json"},
"sAjaxSource": "index.php?option=com_cross&controller=frontpage&task=records&format=raw&cid=cid_1&place=1",
"aoColumns": [
{ "mDataProp": "cd_station_adr", "bSortable": false },
{ "mDataProp": "cd_phone", "bSortable": false },
{ "mDataProp": "cd_port", "bSortable": false },
{ "mDataProp": "cd_line_adr", "bSortable": false },
{ "mDataProp": "cd_user", "bSortable": false },
{ "mDataProp": "cd_desc", "bSortable": false }
],
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "400px"
});
});
function updateList(id, pid, obj){
jQuery(document).ready(function($){
$("html:not(:animated), body:not(:animated)").animate({ scrollTop: $("#cn_title").offset().top-5 });
$("#cn_list, #city_list").hide();
$("#ts_c").html($(obj).html());
$("#clear_c").show();
/*oTable.fnServerData(function(sSource, aoData, fnCallback){
alert("ok");
});*/
});
}[/code]
In updateList function I'm need to get new data from server with new parameters("cid" and "place" in request). I've read the thread about reloadAjaxSource plugin but this is usless for me. dataTables must not to be load all datas(more than one million rows) form DB.
Maybe exist more elegant way?
PS! Now i'm look on the fnServerData function, but how can I implement this in updateList function?
This discussion has been closed.
Replies
[code]
$(document).ready(function() {
$('#example').dataTable( {
/// all your other intializations ...
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "cid", "value": "my_value" } );
aoData.push( { "name": "place", "value": "my_value" } );
$.ajax( {
"dataType": 'json',
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
} );
[/code]
fnServerData is called anytime you call fnDraw (or other draw functions) while using bServerSide: true
-------------------------------
in version 1.8.2+ you can specify params without having to write the whole server call ( $.ajax() ) by using fnServerParams
[code]
$(document).ready(function() {
$('#example').dataTable( {
/// all your other intializations ...
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "cid", "value": "my_value" } );
aoData.push( { "name": "place", "value": "my_value" } );
}
} );
} );
[/code]