How to recreate a table with jQuery DataTables

Question

I'm essentially using the top answer here ( from sdespont) to try to destroy some tables.

I have one table that shows me the status of a .csv file being uploaded.

FileuploadTable:

FileName FileType FileSize AvailableActions

I have a second table that is the table displaying data from the .csv file.

I need provide the user the ability to reset the form, i.e. get rid of the .csv, and get rid of all of the data, destroy() the two tables separately, and empty() them of all the data that was there initially.

Here is the issue I'm running into.

I can't seem to set the column titles of FileUploadTable after destroy() and empty(). When I attempt to upload a new file, the elements are still on the page, just empty, though the same initialization is being called

I can't seem to get rid of the column titles in CSVTable after destroy() and empty(). When I attempt to upload a different csv, it tries to match column headers to the ones that should have been destroyed, but they don't match because, though CSVTable was destroyed and emptied, the column titles are still there...?

Not sure what I'm missing. They're being set properly on initial create.

$(elem).DataTable()

Can anyone show me a basic working implementation of destroying/emptying datatables, then re initializing with different data, so I can try to mimic it. My brain is mush from looking at their docs for the last 3 days, making no progress.

Example of my data object

[
    {
        //key = column title
        //"val" = data in row
        //object = row
        key: "val",
        //i.e.
        FirstName: "Bob",
        LastName: "Barker",
        Age: 800,
        //etc
    },
    //etc
]

Let us see the code. You are asking for a solution to a programming issue in a specific portion of code, without showing that code ..? — davidkonrad
– davidkonrad, Commented Oct 2, 2015 at 18:18
I would if I could... I don't understand the code, I could post where and how it's being initialized, but how the dom is being generated dynamically is woven into the whole architecture, making spaghetti seem like an understatement. I'm sure I wouldn't get away with posting a few hundred lines of code :C — nathan rogers
– nathan rogers, Commented Oct 2, 2015 at 18:44
and really I'm asking for a basic working implementation of destroying and then re initializing datatables with mock data object — nathan rogers
– nathan rogers, Commented Oct 2, 2015 at 18:46
OK, which format does the data have - is it array based, like [[item],[item], ..] or JSON [{item},{item},...] ? — davidkonrad
– davidkonrad, Commented Oct 2, 2015 at 18:51

davidkonrad · Accepted Answer · 2015-10-03 05:43:51Z

OK. You can make a simple iteration over your data using Object.keys() that produces a column object on the fly holding corresponding data and title values :

var columns = [], keys = Object.keys(data[0]);
for (var i=0;i<keys.length;i++) {
   columns.push({ data: keys[i], title: keys[i] });
}

Use that inside a general function that initialises the table and take care of destroying and emptying if already initialized :

var table = null;
function initTable(data) {
    var columns = [], keys = Object.keys(data[0]);
    for (var i=0;i<keys.length;i++) {
        columns.push({ data: keys[i], title: keys[i] });
    }                  
    if (table) {
        table.destroy();        
        $('#example').empty(); 
    }        
    table = $('#example').DataTable({
       data: data,
       columns : columns
    })  
}

Now imagine the following is the success handlers of your AJAX calls, or however you get the new data that should be populated to the table :

$('#insert1').on('click', function() {
  var data = [
    { FirstName: "Bob", LastName: "Barker", Age: 800 },
    { FirstName: "John", LastName: "Doe", Age: 'N/A' }
  ]    
  initTable(data);
})    
$('#insert2').on('click', function() {
  var data = [
    { Animal : "Lion", Taxon : 'Panthera leo' },
    { Animal : "Cheetah", Taxon : 'Acinonyx jubatus' }
  ]
  initTable(data);
})

demo -> http://jsfiddle.net/d5pb3kto/

Collectives™ on Stack Overflow

How to recreate a table with jQuery DataTables

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related