ajax and search screen

shrat

Hello,
i try to make a basic search screen composed by inputText, a button, and a datatable. On the initialization of the screen, the datatable is empty, and must be loaded only after a click on the button.
my code is as follows :
- html :
[code]



Code
Label
Action






[/code]

-script :
[code]
$(document).ready(function() {
$('#tableSearch').dataTable( {
"aoColumns": [
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text",},
{ "bSortable":false,"bSearchable":false}
],
"bProcessing":false,
"bServerSide": false,
"sAjaxSource":"/ModificationController/ajax",
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": false,
"iDisplayLength": ${tableauNbLignes},
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true ,
"bJQueryUI": true,

} );

} );
[/code]

I try to instanciate datatable without "sAjaxSource" and when i click on the button, i define a value, but when the screen reappear the value is undefined
[code]
function search(){
oTable = $("#tableSearch").dataTable();
var oSettings = oTable.fnSettings();
oSettings.sAjaxSource = "/ModificationController/ajax";
/*oSettings.oInit.sAjaxSource = "/ModificationController/ajax";*/
document.forms[0].action='search';
document.forms[0].submit();
};
[/code]

All the example in the documentation show a datatable loaded at the initialization. Is there anybody who can help me to get solution ?

allan

The way to do this is to initialise your table like you have, then the make a "manual" call to the server to get the data ($.getJSON will do, or any of the other jQuery Ajax options, or any other method of doing Ajax!) and then add the data using fnAddData ( http://datatables.net/api#fnAddData ).

Allan

shrat

I have suppressed "sAjaxSource" at the initialisation of the datatable and the following function is called by the click on the button. it works fine, thanks !!

[code]
function search(){
oTable = $("#tableSearch").dataTable();
oTable.fnClearTable();
$.getJSON("/ModificationController/ajax",callBack);
function callBack(data) {
$.each(data,
function(i,row){
oTable.fnAddData( row);
}
);
};
};
[/code]