Event After DataTable Initialised

wallabe123

My code currently allows the user to select multiple filters from a chart and apply them to the DataTable. I am storing these filters as session variables so that when the user reloads the page the filters still exist. I now want to reapply these filters to the table once the table is loaded back in. Note that any in-built save state functions will not work as the filter method is custom code.

I have tried the following events to trigger the filters to be applied and ran into the same issues with all of them:
.on('init.dt) -> this triggers the filter function which then throws an error saying '$(...).DataTable is not a function' which hints that the DataTable has not been fully initialised and the method cannot find the table.
initComplete-> same as above
.on('draw) -> this triggers every time a filter is applied and I only want it to trigger once when the page is reloaded

Are there any other events/ways to trigger a filter method only once when the page is reloaded and only if the table is fully loaded and can then be found by the method

kthorngren

I wonder if the problem is with what you are trying to do in initComplete or init. If you are trying to get an instance of the Datatables API use -var api = this.api();. Similar to this example. If this doesn't help then please post the code you are trying to use in these events.

Kevin

wallabe123

Thanks Kevin, the event should trigger a function which passes in a string input. The function takes this string input and uses it to determine which table it is applying the filters to. Something like below:

DataTable configured.
Initialisation event triggered.
Function called within event and string passed in.
Function uses string to determine which DataTable is being filtered.
DataTable selected using $('#example-table').DataTable();

The above line is where it goes wrong as it cannot find the table. If I instead use a button to do the filtering instead of doing it on event trigger within DataTable initialisation it works. It seems it cannot find the table as it hasn't been fully initialised yet? Also note that the function works correctly if I am filtering as usual - its just when it is called on DataTable initialisation it fails.

Apologies I cannot post the full code.

kthorngren

As I said, instead of using $('#example-table').DataTable(); use this.api() in initComplete like the example I linked to. This will give you the API instance you can use in your function.

If the error you are getting is due to some code you have in initComplete then please post the full iniComplete code so we can better help you.

Kevin

wallabe123

Sorry I should have been more clear, the only code within the actual initComplete is to call a JavaScript function. It is within this function that it selects the DataTable.

      initComplete: function (settings, JSON) {
              applyStoredFilters('test-filters')
        }

        function applyStoredFilters(filterType){
            if(filterType == 'test-filters){
                $('#test-table').DataTable(); // throws $(...).DataTable is not a function error
            } else{
             $('#example-table').DataTable(); // throws $(...).DataTable is not a function error
            }
            //filters applied
        }

kthorngren

I'm a bit confused by the code snippets. It doesn't make sense why you would get the $(...).DataTable is not a function error based on what you posted. There must be some code flow that isn't shown above thats introducing the error. Can you provide a link to your page or build a test case that shows the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

wallabe123

Thanks for your help, unfortunately I can't share my code. Definitely something to do with timing of events as if I do the exact same code within a timeout function of 2 seconds in the initComplete it works fine. Will have a proper debug tomorrow with fresh eyes! Thanks again.

mtdev

Hello,

Just a fresh eye (not the one you are waiting for, but let's try) on some points :

1) As Kevin said, this.api() is available in initComplete(), so you could pass it as argument to your applyStoredFilters function, to be sure to get at least one right DataTable API instance.

2) About "right instance", you are using the initComplete of one DataTable to call a function that will manage several DataTable instances. It is sure that one DataTable has its initialization completed (the one whose you provide the code), but perhaps the other DataTables have not its initialization completed at this time ?

3) In initComplete() you should be able to use $('#test-table').DataTable(), if test-table is really the ID of the table on which you instantiate your DataTable. A simple way is to test it in the initComplete, before calling your custom function, just to be sure.

4) According to answer of point 3) are you sure in the scope of your custom function than $ is always the expected lib ? (seems to be invalidated by your last comment)

5) About you last comment, and setTimeout(), know you can use en event which will be triggered just one time. I think about your on.draw() : try one.draw() to trigger it only one time. (I guess that should work).

mtdev

wallabe123

@mtdev

Thanks for your help! I have went with your last suggestion which calls the draw function only once on the first draw.

In reply to some of your other thoughts,
1 - this didn't help the issue although (like you) I think it should! The same error appeared even after using this as an input argument
2 - I did consider this however the error always appeared within the conditional loop for this table. The other lines of code which tried to find the other (potentially uninitialized) tables weren't triggered.
3 - this works fine. I can also console.log info from the DataTable at this point
4 - the function can expect any of 4 tables to then filter from. The argument passed into the function determines which table this will be. For the test table in this case it was always attempting to find the correct table and would then fail
5 - as above, this works! I didn't realise this was an event but it has worked perfectly.

Thanks again for your help