HELP! how to update the table when sAjaxSource changed?

zh.chao163

hi,
i have a form and a datatable on the same page. The form is used to set the query criteria. when the form submitted ,the datatable should list all the matched data. The partial codes are here:

$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true
,"bServerSide": true
,"sAjaxSource": ""
,"sPaginationType": "full_numbers"
} );

$('#form').submit( function() {
str = $("form").serialize();
oTable.sAjaxSource="/jsonList.action?"+$("form").serialize();
// i want to add some codes below to update the datatable,
// but dont know how to do this.

return false;
});

});

i dont know how to update the datatable to make it display the queried data from database.
Any help will be appretiated!!

allan

Hello,

If you want to redraw the entire table using the return from the server then there is a very handy plug-in API function available for what you are looking for: http://datatables.net/plug-ins#api_fnReloadAjax .

If however you want to just add a few rows to the table, then you can use fnAddData(): http://datatables.net/api#fnAddData

Hope this helps!
Allan

iyjian

hi, allan
i have the same problme as above... i am exciting when i found the search function and then searched this topic, but i just can not open the link which you post, can anyone give me a hand?

the link you post : http://datatables.net/plug-ins#api_fnReloadAjax .

allan

Hi iyjian,

Try this one: http://datatables.net/plug-ins/api#fnReloadAjax . I changed the site around a bit, a while back. So some of the old forum links are out of date now. The URLs should indicate where they will be on the present site though, by clicking in the various sections.

Regards,
Allan

iyjian

thank you very much, i get it now. i am a Chinese and i guess zh.chao163 is also a Chinese, because that name is a typical Chinese name

oraora

Hi allan,

I'm just trying to do exactly same as this topic, also read fnReloadAjax function page you mentioned above but still cannot figure out how to update table using server-side processing.
There is the sentence "To reload data when using server-side processing, just use the built-in API function fnDraw rather than this plug-in."

If you do not mind, would you please teach me how to use fnDraw function for this? Thanks for your great plugin and your help.

Regards,
oraora

miamiseb

I made the following to get what oraora was asking for (and what I needed). I simply added a different extra parameter to my sAjaxSource.

[code]
$.fn.dataTableExt.oApi.fnSetAjaxSource = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null )
{
oSettings.sAjaxSource = sNewSource;
}
/* Callback user function - for event handlers etc */
if ( typeof fnCallback == 'function' && fnCallback != null )
{
fnCallback( oSettings );
}
}
[/code]
And below is how I create the callback for datatables that then does all the magic, feel free to use as an overly complicated example (it does some jeditable stuff.) Basically though, you call fnSetAjaxSource and then call fnDraw() which will then use your callback to grab everything from the server.

[code]
oTable = $('#dt_sipadmin').dataTable({
"fnDrawCallback": function() {
$(oTable.fnGetNodes()).find("td").filter(":nth-child(1)").find("input").click(function() {
var $id = $(this).closest("tr").find("td").filter(":nth-child(2)").html();
/* This works but we should move this to edit controller so keep uniformity */
$.post("/sipadminssp", { ID: $id, Action: "DELETE" }, function(data){
alert(data);
});
oTable.fnDraw();
}); /* Ends click binding for DELETE buttons */
$(oTable.fnGetNodes()).find("td").filter(":nth-child(3),:nth-child(4)").slice(0,1).editable( '/sipadminEdit', {
"callback": function( sValue, y ) {
if (isNaN(sValue)== false) {
alert('Successfully added ID: ' + sValue);
oTable.fnSetAjaxSource( '/sipadminssp?firstID=' + sValue );
}
/* alert('hey' + sValue); */
oTable.fnDraw();
},
"submitdata": function ( value, settings ) {
var $t = $(this), i = $t.prevAll().length, parent = $t.closest("table"), header = parent.find("th").eq(i).html();
return { "row_id": this.parentNode.childNodes[1].innerHTML, "Field" : header };
},
"height": "14px"
} ); /* Ends editable handler for the first (addition) row */
$(oTable.fnGetNodes()).find("td").filter(":nth-child(3),:nth-child(4)").slice(2).editable( '/sipadminEdit', {
"callback": function( sValue, y ) {
oTable.fnSetAjaxSource( '/sipadminssp' );
oTable.fnDraw();
},
"submitdata": function ( value, settings ) {
var $t = $(this), i = $t.prevAll().length, parent = $t.closest("table"), header = parent.find("th").eq(i).html();
return { "row_id": this.parentNode.childNodes[1].innerHTML, "Field" : header };
},
"height": "14px"
} );/* Ends editable handler for all rows after the first */
}, /* Ends the datatables callback that is called on every draw */
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/sipadminssp",
"sPaginationType": "full_numbers"
} ); /* Ends datatables handlers */
[/code]

Obviously, it's missing server side code to power it, the code below is an example of using the new parameter (in this case firstID) to add a row to the output later via $sOutput .= $sOutputFirst; Note: it uses drupal's database abstraction layer, so you may need to change this to mysql_query (or whatever your flavor) and rewrite the query.

[code]
if ( isset($_REQUEST['firstID']) && is_numeric($_REQUEST['firstID'])) {
$firstID=$_REQUEST['firstID'];
$sQuery = "SELECT uuid,username,value FROM `%s` WHERE `uuid` = '%d'";
$rResult = db_query( $sQuery, $dbtable, $firstID);
if ( $aRow = db_fetch_array( $rResult ) ) {
$sOutputFirst .= "[";
$sOutputFirst .= '"",';
$sOutputFirst .= '"'.addslashes($aRow['uuid']).'",';
$sOutputFirst .= '"'.addslashes($aRow['username']).'",';
$sOutputFirst .= '"'.addslashes($aRow['value']).'"';
$sOutputFirst .= "],";
}
}
[/code]

roy.johanis

Hi Allan,

First of all, thank you very developing such a great tools.

I have a little question abut fnReloadAjax function, does this Function only load/need data (aaData) without changing any DOM wich already drawed before?? or does it need all other data to redraw the table??

Thank you very much,

Roy Johanis

allan

Hi Roy,

fnReloadAjax will destroy the old table information, and then put the new information in it's place. If you have a look at the code for the plug-in you will see that it calls fnClearTable(). So fnReloadAjax will just put into the table whatever it gets back.

Allan

roy.johanis

Hi Alan,

Thanks a lot..