[BUG] init() method has no options parameter anymore?

[noehmeier]

• [x] I have looked through the documentation to try to see if this behavior is documented.
• [x] I have looked at the demos to see if one of them handles this, but none of them did.

Describe the bug I am migrating from v3.2.2 to v9.0.0. Most changes i can migrate, but for one change i miss the init() method options parameter. I tried to go around with that circumstance to use instead the update() method, but it is like a mess with my use case.

I manipulate the DOM of the datatable by my own and after the user clicks an update button, i want to reload the whole datatable with new data.

The outgoing code in v3.2.2 is like following:

import { DataTable } from "simple-datatables";

const dataTableHtmlId = "table-project";
let dataTable : DataTable | undefined;
let formData = getDatatableData();

// init datatable
dataTable = new DataTable("#" + dataTableHtmlId, {
  data: { data: formData },
  [...]
}

// update click event triggered
[...]
formData = this.getDatatableData();
dataTable.destroy();
dataTable?.init({ 
  data: { data: formData },
  [...]
}); 
// => this code works in v3.2.2

I tried as in old version. The init() documentation says, i can pass still the options with my new data:

But it works not anymore, i cannot find any hint why in the Upgrading documentation. Also when i check the code, there seems to be no options parameter anymore:

The result is, the datatable get destroyed but seem not to init it anymore, in DOM i see the empty initial HTML table, not the simple-datatable. I found the init/destroy demo, but destroy() is not used there? Also init-button does not change anything after destroy - and also not using the init() method? Or i just don't understand the example?

I also tried the following:

datatable.destroy();
datatable = new simpleDatatables.DataTable("#" + dataTableHtmlId, {
  data: dataUpdate
});

I try to destroy it and instead of use init() i tried to initialize it with new, i get the same result as with init(). I see only the empty initial HTML table.

So, is it a bug, that the options parameter is missing at init() method? And if not, what is the "new" way, to reload the whole datatable? I played already around with update(), but it removes not my DOM-maniuplated elements, update() + refresh() didn`t do aswell.

To Reproduce

I have created a jsfiddle here: https://jsfiddle.net/noehmeier/upx4e0Lv/5/ that demonstrates the issue.

Steps to reproduce the behavior:

1. Go to fiddle and run it
2. See, that datatable is destroyed, but not initialized with options parameter data
3. to check 2nd try, comment in line 22-25, uncomment line 29-32
4. run it again
5. see same result as described in 2.

Expected behavior I expected, that the init() options parameter still exists like mentioned in the documentation and i can initialize the datatable with my options, after i destroyed it.

Additional context Do you have any idea what i am doing wrong or what is the right approach? Thank you very much in advance.

[noehmeier]

I am writing to inquire about the current status and future plans regarding my issue and the simple datatables project. I did not see many activities the last month. Will the project proceed further? Thank you very much for your attention to this matter, and i am looking forward to heading from you soon. Warm regards Steph

[0Chan-smc]

I'm in a same situation now(replacing whole datatable with fetched data).

And it looks like this commit changed things in version 5. (remove js comments and reorganize init)

But right now 'init/destroy demo' doesn't work so. I have no idea how to solve this problem. @johanneswilm Can you please help us?

[ray-wn]

EDIT: It definitely started with 9.0.0, with 8.0.1 it worked. Just here to say I have the same issue. I replace the data by using destroy and setting the dataTable again, but it's broken. I think it started with version 9.0.0:

if (table !== null) {
    table.destroy();
}

table = new simpleDatatables.DataTable(tableElement, { /* options and new data */ })

Would be awesome if this will still work, because I have a big wrapper that sets options and new data etc. and finally returns the DataTable object: table = mySimpleDataTablesWrapper('#myTable, values);

[ray-wn]

Not sure if this works for your use-case @noehmeier @0Chan-smc: https://github.com/fiduswriter/simple-datatables/issues/375#issuecomment-2047480569

[johanneswilm]

Hey, yes, so some of the options are needed already in the creation of the Datatable instance. For that reason we cannot change those options it by calling init() again without it getting messy.

The thing that is being requested here is to update both the columns and the data within the columns at the same time while keeping everything else the same.

One way to do this is you can destroy the datatable and start off with an entirely new instance like this:

datatable.destroy();
datatable = new simpleDatatables.DataTable("#" + dataTableHtmlId, {
 data: dataUpdate
});

(has been fixed to work in 9.0.1)

Another alternative is to manually change the contents of datatable.data and then to run the datatable.refresh() method to update the DOM.

[johanneswilm]

For this specific case, where you want to exchange headings and contents while keeping everything else the same, you can also do:

dataTable.data = {
  data: [],
  headings: []
}
dataTable.hasHeadings = false;
dataTable.hasRows = false;
dataTable.insert(dataUpdate)