CODEWITHSUNDEEP
javascriptjquerydatatables
nathan rogers
nathan rogers

Reputation: 300

How to recreate a table with jQuery DataTables

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
]

Upvotes: 2

Views: 3244

Answers (1)

davidkonrad
davidkonrad

Reputation: 85538

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/

Upvotes: 3

Related Questions