Redraw datatable with new column set and server side data

eea61

I have a form which allows user to select columns of the table and by

clicking on a button, the rows will be populated from the server.
here is my code for building the table after button click:
[code]
function buildTable(nodesArr, culumnArr) {

if (nodesArr.length > 0) {

if (oTable == null) {
oTable = $("#divDT").dataTable({
"aoColumns": culumnArr,
"bProcessing": true,
"bDestroy": true,
"bServerSide": true,
"bRetrieve": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "IndexHandler.ashx?ids=" +

nodesArr.toString(),
"sDom": '<"top"i>rt<"bottom"lp>',
"bStateSave": true,
"iCookieDuration": 60,
"fnServerData": function (sSource, aoData, fnCallback)

{
$.getJSON(sSource, aoData, function (json) {
var aaData = [];
$.each(json.aaData, function (index, object) {
var aData = [];
$.each(object, function (key, value) {
aData.push(value);
});
aaData.push(aData);
});
json.aaData = aaData;
fnCallback(json);

});
}
}); //END OF oTable
} else {
oTable.fnReloadAjax("IndexHandler.ashx?ids=" +

nodesArr.toString());
}



} // END OF buildTable(nodesArr, culumnArr)

[/code]

the first time the table is drawn with no problem.
but I don't know what to do to redraw datatable compeletely (with new columns and rows from server).
I've read the when is comes with server processing, I can't use fnReloadAjax. but with fnDraw I didn't have any success either.since the columns( the number of columns and their names) should be redrawn again. I set bDestroy true. but still no success. what should I do?

f

eea61

The way that finally worked for me was to destroy data table and totally reinitialize it. so in the "else" part of the code above i wrote this code:

[code]
$('#divDT').dataTable().fnDestroy(true);
buildHTMLTbl();
oTable = $("#divDT").dataTable({
"aoColumns": culumnArr,
"bProcessing": true,
"bServerSide": true,
//"bRetrieve": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "IndexHandler.ashx?ids=" + nodesArr.toString(),
"sDom": '<"top"i>rt<"bottom"lp>',
"bStateSave": true,
"iCookieDuration": 60,
"fnServerData": function (sSource, aoData, fnCallback) {
$.getJSON(sSource, aoData, function (json) {

var aaData = [];
$.each(json.aaData, function (index, object) {
var aData = [];
$.each(object, function (key, value) {
aData.push(value);
});
aaData.push(aData);
});
json.aaData = aaData;
jsondata = json;
fnCallback(json);

});
}
}); //END OF oTable
[/code]
[code]
function buildHTMLTbl() {
var htmlStr = "";
htmlStr += " ";
htmlStr += "";
htmlStr += "";
$("#divWrapper").prepend(htmlStr);
}
[/code]

allan

Hi,

Yes you are absolutely right - at the moment, DataTables does not support dynamically adding and removing columns - you could possibly show/hide columns (which is supported) but including all columns initially and then removing the ones your user doesn't want, which might be faster than destroying and recreating a table, but at the moment if you want to completely change the columns, that is the only way.

I will be looking at writing a plug-in to allow dynamic column addition and removal in future.

Allan