Multiple Tables with AJAX / JSON feed

thowi

Hi all together,

I checked the following example to see how to use multiple tables with the same configuration: https://datatables.net/examples/basic_init/multiple_tables.html

So far so good - but I feed my table content via AJAX (JSON). This data feed is part of the configuration:
"ajax": "sql/json.php",

It is possible to use multiple tables with the same configuration and also feed the table contents with the above mentioned way?
Maybe I have to say that I'd like to move the multiple tables in a jQueryUI Tabs structure and I'd also like to load the tables contents only when clicked on the jQueryUI tab. I don't know if that will affect the use of multiple tables in datatables, but maybe good to know anyway.

Thank you for your help!

kthorngren

Yes, you can do all of that. If you want to load the data only when the tab is shown then you will need to initialize the Datatable at that time. Here is an example of Datatables within jQuery UI tabs.
http://live.datatables.net/yicovile/2/edit

Within the click event you would initialize the Datatable for the tab that is clicked. This example doesn't use ajax but you can use ajax loaded tables.

Kevin

thowi

Hi @kthorngren ,

thank you for your example! It is strange - when I completely remove the // Show tab when clicked in the JavaScript panel, nothing changed? Tables are still appearing, also wenn reloading and jumping through the tabs in the output, everything works. I thought that this snipped displays the table when clicking the tab?

In your code you have initialised table, table1 and table2. When using AJAX with my JSON injection, I will need to to that in every single table - so I have to double my remaining configuration and only change the one line "ajax": "sql/json.php", to like "ajax": "sql/json2.php",
The whole remaining 113 lines of the datatables configuration will stay the same.

Is there a way to avoid that? Maybe to initialise one "master-datatable" and when creating new datatables just use that "master-datatables main configuration" and in a second line hand over the new "ajax": "sql/json2.php", AJAX injection?

You know what I mean? I would like to avoid copying 114 lines like 3 times when I need 3 Tables - and only change 1 line in each of those 3 code blocks.

Cheers,
thowi

thowi

Loading the tabs content can also be done like shown here: https://jqueryui.com/tabs/#ajax

A workaround then would be copying my 114 line datatable configuration 3 times and pasting each configuration in a separate .php file (for 3 tabs with 1 table each).

Then I change only the "ajax": "sql/json.php", line in each configuration.

This would work - but that's not very nice

kthorngren

Sorry, my mistake its using Bootstrap tabs. The concept would be similar though. Guess I should make a jQuery Tabs example

I didn't create this example for your question. Its one I had made previously so it doesn't meet your specifications. It was meant to highlight what you can do.

This example loads all three tables at the start. However you could load the appropriate table when the tab is clicked. In the case of jQuery UI tabs maybe this event would be appropriate:
https://api.jqueryui.com/tabs/#event-beforeActivate

I would like to avoid copying 114 lines like 3 times

My suggestion would be to use a function to initialize the Datatable. The parameters passed (maybe ajax url) to the function would be used during initialization. When the tab is clicked call this function in the event you decide to use.

An alternate method pwould be to use data attributes defined on each table. This recent thread discusses this.
https://datatables.net/forums/discussion/comment/143164/#Comment_143164

You would remove the ajax option from the Datatable init code and Datatables will pull it from the data-ajax="sql/json.php" defined on the table.

Kevin

kthorngren

Thinking about it you might want to use this active event instead, so you can see the table load:
https://api.jqueryui.com/tabs/#event-activate

Kevin

thowi

Thank you Kevin,
that sounds like a good plan - I will try that
thowi