Clearing a table and re-initialising
Clearing a table and re-initialising
sjw01
Posts: 67Questions: 36Answers: 1
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...
Answers
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 userows.add()to add your data. For example:Make sure this does not follow the above code:
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
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
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: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