Exporting Data as Displayed in Table

maadso

Hello there,

I'm using DataTables combined with Pivot.js and D3 to create a dashboard for my company. I'd like to know the Callback function (or other method) for accessing the data as it appears in the table, in order to create a D3 graph directly with that data. I need an array for each row which includes the column headers in addition to the summary data and the row label. I also would like it to match exactly what is displayed in the table, ie. when a user does a search, the data should only include the results from that search as displayed in the table.

Any ideas? Thanks in advance for your help!

mnmdad

I am also very interested in this. Might it be best to use a separate MVVM library like knockoutjs and populate the table and graph from there? Perhaps that it too heavy.

http://datatables.net/dev/knockout/ shows how you integrate knockoutjs and dataTables.. and http://www.voyce.com/index.php/2013/06/23/dynamic-d3-with-knockout-js/ shows how to integrate d3.js with knockoutjs.

allan

I'd like to know the Callback function (or other method) for accessing the data as it appears in the table

The ajax.json() API method will give you the data from the last Ajax request. Use initComplete as well, which also gives the JSON from the server, and finally the xhr event will also give you it!

Allan

maadso

Hi Allan,

Thanks for your reply! I'm not specifying an ajax source to build my table, is there a way to get what ajax.json() appears to do without specifying the "ajax" property?

allan

So how is the table being populated - is it bring read from the DOM? If so, you can use the data() or rows().data() methods to get the data from the table.

Allan

maadso

I'm using a library called Pivot on top of DataTables. The variable "file" points to a csv on our apache server.

function setupPivot(input) {
input.callbacks = {
afterUpdateResults: function() {
"sDom": "<'row'<'span6'l><'span6'f>>t<'row'<'span6'i><'span6'>>",
"iDisplayLength": 500,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"aaSorting": [[sortCol, "desc" ]],
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "MENU records per page"
}
});
}
};
$('#pivot-demo').pivot_display('setup', input);
};

    setupPivot({url:file, fields: fields, rowLabels:[dimension],columnLabels:["order_date"], summaries:[pivot_measure]});

Would it be easier to change the table setup to include an ajax request? The data() command shows me only the row label and the summary measure, but I need the summary measure attached to the column label (date) as well.