I use jQuery UI Tabs. I have a DataTable in each new tab. I want to add rows that were selected in a dialog box to the table in the current tab.
Because I have those tables inside tabs named with a same number that I used for tabs (e.g. "tabs-1" will contain table "choice1") I would rather find the needed table each time I need to add rows than store all those table variables in collection.
If you precisely and definitely know that accessing already-initialized DataTables when they were initialized without storing in a variable is impossible, please suggest a storage method, because the only thing which comes to my mind is an object where keys are the strings containing tab names and the values are the table variables. And I'm not sure it's the best way.
Here's what I tried by now:
var id = '#choice' + $("#tabs ul>li a").eq(tabs.tabs('option', 'active')).attr('href').slice(-1);
$(id).row.add( dialogTable.rows({ selected: true }).data() ).draw();
So, even if I comment the first line and hardcode "#choice1" it will still produce an error TypeError: $(...).row is undefined
.
You have to call .row()
on a DataTables API instance not on the jQuery table object.
Calling .DataTable()
will initialize a datatable and return an API instance. If table is already initialized, it will just return the instance.
From the docs:
Accessing the API
A new DataTables API instance can be obtained for one or more tables in one of three different ways:
$( selector ).DataTable();
$( selector ).dataTable().api();
new $.fn.dataTable.Api( selector );
The result from each is an instance of the DataTables API object which has the tables found by the selector in its context.
This will get you the row you want:
$(id).DataTable().row()
Therefore, this should work:
$(id).DataTable().row.add(dialogTable.rows({ selected: true}).data() ).draw();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With