drawCallback and passing table to a function - concept

longestdrive

Hi
I'm trying to sort out a delete function for records in a table. I have a button assigned to each row that when clicked I want to delete the record in the database (via ajax) and then delete the row.

I've created a module to handle this to which I'm trying to pass the DataTable object from within the drawCallback but at this point it appears the object is undefined.

Here's the basic initialisation inclduing the drawCallback. The table loads on the page as expected.

datatableSetup = function () {
            oTable = $('.datatable').DataTable({
//other options have been set but removed for brevity
            drawCallback: function (oSettings) {
                    initDeleteRecord();
                },

and here's the method it calls (which passes data to a delete module):

initDeleteRecord = function () {
            console.log("init delete:", oTable);
            datatableDelete.init({
                table: oTable,
                url: '/productions/',
                itemName: 'Production'
            })
        },

at this point oTable is underfined

In my initialisation if I do this:

init = function () {
            datatableSetup();
            initDeleteRecord();
        },

Where datatableSetup deals with the usual datatable initialisation, calling initDeleteRecord appears to pass the datatable object as expected but I'm worried this may not always work if there are delays in drawing the table (large data etc) - should I try to restructure this call as a callback?

So, at what point is the datatable object defined and data available to place events on and be able to pass the datatable object to another module? I'm still learning so may not have the theory right.

Thank

kthorngren

I think you are looking for the initComplete callback which runs after Datatables initialization is complete. The oTable variable still might not be ready at this point. Not sure I would have to test it. The drawCallback runs on each table draw, ie, sorting, searching, paging.

Depending on the scope of your variables, oTable still may be undefined in the initDeleteRecord() function. You can always get an instance of the API by doing this:

initDeleteRecord = function () {
            var oTable = $('.datatable').DataTable();
            console.log("init delete:", oTable);
            datatableDelete.init({
....

However using .datatable as the selector indicates you might have more than one Datatable on the page. If more than one then you will have to do something to make sure you are getting the correct instance. We will need more info if you have more than one Datatable on the page to help.

Accessing the API is discussed here:
https://datatables.net/manual/api#Accessing-the-API

Kevin

longestdrive

Hi Kevin

That did the trick - thank you.

I reverted to get another instance of the Api which works in this use case - but also change to a unique ID to avoid future conflicts:

initDeleteRecord = function () {
            
            datatableDelete.init({
                table: $(tableID).DataTable(),
                url: '/productions/',
                itemName: 'Production'
            })
        },

I hadn't appreciated that functionality and will do a bit more reading - I think I passed over that as assumed it was re-creating a brand new table rather than a access to an existing one.

Brilliant!

Thank you