Dynamically apply DataTables for subsequent requests

jchannon

I am following the example here http://datatables.net/examples/data_sources/js_array.html

I have a button on a page that will return data via JSON from a Websocket that will have different columns and number of rows. Every time the user presses the button I want datatables to be applied to a HTML table.

I have it working the first time but all subsequent requests error.

How can I dynamically apply DataTables to a table whenever data is returned in whatever form its in?

GregP

Just to clarify: data comes in on a websocket, and then gets pushed into a JavaScript array (which is your data source). When the user presses the button, this array is meant to be published to the DataTable. However, the number of columns will potentially change each time the button is pressed?

Sounds tricky! Hope this idea doesn't add an unecessary layer (smarter men than me are sure to correct me if my idea stinks) but I would consider getting the data into the JavaScript Array, and then dynamically creating the empty table based on the array before pushing the data into it. By doing it this way, when dataTable() is called on the table element, the correct number of columns should already be in place.

The piece I'm not sure about is where to get the header row names. I suppose those could be sent in the JSON as well.

jchannon

Here is my code and all seems to be working however there is a bug in DataTables saying nOrig is null in the following scenario.

Table Gets Populated
Table Gets Populated
No Data
Table ***tries*** to get populated by fails on the Destroy

[code]

var oTable;

socket.on('message',function(data) {
console.log('Received a message from the server!',data);
var ss = $.parseJSON(data);

if (ss.NewDataSet.hasOwnProperty('@'))
{
var columnArr = [];
var valueArr = [];
var tableName = ss.NewDataSet['@'].xmlns;
var data = ss.NewDataSet[tableName];
console.log(ss.NewDataSet[tableName]);


if (!data.hasOwnProperty('length'))
{
data = [data];
}


//Strip the titles off your first array item only since they are all the same.
$.each(data[0], function(key, value) {
columnArr.push({"sTitle" : key});
console.log("Column:"+key);
});

$.each(data, function(key, value) {
var innerArr = [];
$.each(value, function(innerKey, innerValue) {
innerArr.push(innerValue);
console.log("Col Value:"+innerValue);
});
valueArr.push(innerArr);
});


if(oTable){
console.log("trying to destroy");
oTable.fnDestroy();
console.log("destroyed");
}
$('#tableholder').empty();
$('#tableholder').html('');

oTable = $('#list1').dataTable( {
"aaData": valueArr,
"aoColumns": columnArr
});
}
else
{
$('#tableholder').html('No Data');
}

});



asdas





[/code]

jchannon

Ok I got it working by calling Destroy and setting oTable = null even when there was No Data so when there was data it wouldn't fall over

jchannon

Would you say this is a decent way to dynamically invoke DataTables?

GregP

You're a smarter person than me, but it looks decent from where I'm sitting. I can't help suspect there's a way to work with the original oTable all the way through using the API with potentially one or two hidden functions; but I couldn't begin to design it, and simply destroying the oTable and creating a new one might actually be more efficient.

I assume there's some other setup script somewhere for establishing the socket? I know it's outside the scope of this forum, but we hope to move from polling to Websockets eventually and seeing some sample code would be awesome.

On those same lines, what technology are you using on the server side to establish the websocket? Trying to find a best-in-class Websocket component for Java.

jchannon

I did wonder if there was a way to reset the table via the API so you can pass a new set of columns and data to it rather than destroying it. Would it be possible to get Allan in on this thread to see if he knows?

Not sure about Java but I am using node.js and socket.io to handle the socket stuff. I am actually writing a ASP.Net MVC app but on some pages I need to do socket stuff to comunicate to a TCP server. Node connects to the TCP server and processes the results and I then send the data back in JSON format to the client via socket.io.

GregP

Thanks for the insight. socket.io is a good choice with its healthy spate of fallbacks and alternatives. Will continue looking for a Java module that can establish a websocket connection. Thanks!