Datatable updated at submission of a form button

ahsan_cse2004

Hi,
I have to render a reporting interface using dataTables.
The page contains a form which contains a button "Fetch Data" and a dataTables.
Initially on page reload I want my dataTables to be rendered as blank and when user clicks on button "Fetch Data", the table should be rendered using AJAX. Rest all of the operation like pagination, filter etc need to be subsequent AJAX call since data is huge so I can't take it to UI in a single call.

Is there any way of doing this?

I have already used dataTable successfully with server side data as follows.

[code]
$('#publisherListTable').dataTable({
"iDisplayLength": 10,
"aLengthMenu": [
[10, 20, 50],
[10, 20, 50]
] ,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "list.htm",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": "json",
"type": "POST",
"url": sSource,
"data": aoData,
"success": function(json) {
var sEcho = json.sEcho;
var iTotalRecords = json.iTotalRecords;
var iTotalDisplayRecords = json.iTotalDisplayRecords;
var aaData = [];
$(json.publisherList).each(function () {
aaData.push([this.id, this.name, this.description, this.email, this.vertical.name, this]);
});
var newJsonObject = {
"sEcho":sEcho,
"iTotalRecords":iTotalRecords,
"iTotalDisplayRecords":iTotalDisplayRecords,
"aaData":aaData
};
fnCallback(newJsonObject);
},
"error":function() {
alert("Error occurred while fetching list of publishers.");
}
});
},
"aoColumnDefs": [
{ "bSortable": false,
"aTargets": [5],
"bUseRendered": false,
"fnRender": function(obj) {
return '' +
'' +
'';
}
}
]
});
[/code]

However it fetches data at every page reload and renders the datatable
In this case however, I need my table to be blank rendered on page reload and then users to fill the form and click on some button which will now update the datatable via AJAX. Rest of the further operations also need to be AJAX server side operations.

Thanks
Ahsan

ahsan_cse2004

Hello All,

Is there any way of doing this?

Also, I am unable to reload the table with AJAX data. All I want is that on click of a button, my dataTable should be redrawn with new server side data. The previous settings/sorting etc should be intact however. I think there should be some API call but I do not seem to find that.

Can anybody please help me to do this?

Thanks
Ahsan

handbuch

In am totally newbie but maybe something like http://www.datatables.net/api ? But why a button? If you have pagination you can load it liek a stream. each page is loaded seperately, im not 10=% sure but im quite sure i've read something like that.

ahsan_cse2004

Thanks handbuch.

I did it as follows.

[code]
$('#leadReportTable').dataTable().fnDraw(false);
[/code]

Ahsan.

swillis11

I know this is an old post but I have this same problem, how did you end up solving it?