Clearing a table and re-initialising

sjw01

I am starting to get frustrated... Banging my head on the desk. I just can't figure out why this keeps throwing an error.

I was initialising my table:

var table = $('#table').DataTable({

    data: dataSet,
    columns: [
        { 
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { title: "RO Number" },
        { title: "Dept" },
        { title: "Age" },
        { title: "Age Cat" },
        { title: "RO Advisor" },
        { title: "RO Sales Amount" }
    ]
});

This was fine - What I want is to re-initialise within page, so I added the following few lines prior which is what the documentation advised but I can't get to work - I want to get the table instance, clear it, then re-initialise it but it is proving way beyond my skillset...

var table = $('#table').DataTable();
table.clear().draw();

var table = $('#table').DataTable({

    data: dataSet,
    columns: [
        { 
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { title: "RO Number" },
        { title: "Dept" },
        { title: "Age" },
        { title: "Age Cat" },
        { title: "RO Advisor" },
        { title: "RO Sales Amount" }
    ]
});

Which results in: Uncaught TypeError: Cannot read property 'aDataSort' of undefined

I then tried

var table = $('#table').DataTable();
table.destroy();

Same error: Uncaught TypeError: Cannot read property 'aDataSort' of undefined

I then tried to specifically tell it to grab the instance:

var table = $('#openro-data').DataTable( { retrieve: true } );

Same error: Uncaught TypeError: Cannot read property 'aDataSort' of undefined

Why can't i grab the table instance, destroy it, and re-initialise it?
The dataSet is a javascript array within the page so should be easily accessed...

kthorngren

Normally you only need to initialize Datatables once. You only need to use table.destroy() if you want to change the Datatable config.

When you use table.clear() you can then use rows.add() to add your data. For example:

var table = $('#table').DataTable();
table.clear();
rows.add(dataSet).draw();

Make sure this does not follow the above code:

var table = $('#table').DataTable({
 
    data: dataSet,
....
});

If this doesn't help please build a test case showing your issue so we can see exactly what you are doing and help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

sjw01

Kevin,

Thanks. I see what you're doing there... and this wont work for me now I look at it. I not only want to re-add rows, but I want to refresh everything to it's intial state.

I want to completely destroy the table and its state and then re-initialise it as if we were starting all over again.

I have numerous test cases on the go which you can view the latest here: http://live.datatables.net/lidequra/9/edit

Why do I want to clear the table and start again?
- simplicty.

Issue #1: Clicking "Show all" shows every column and then "Reset Cols" hides the initial hidden columns... You will notice that the table width is not reset to 100%

Issue #2: If you select multiple select dropdown lists, resetting all to default will require jQuery to manage

I figure I can reset everything and kill 2 birds with one stone

allan

I don't see a destroy() call in your linked test case, but if you want to kill the current table and start afresh, you'd do something like:

if ( $.fn.dataTable.isDataTable('#openro-data') ) {
  $('#openro-data').DataTable().destroy();
  $('#openro-data').empty();
}

i.e. destroy the table only if it exists and then empty it out (since you are starting with an empty table in this case anyway).

Allan