Accordions losing functionality after navigating to >= 2nd page in datatables

[bishwa]

We have accordions within datatables in our implementation. The first page of the datatable the accordions renders and functions as expected, but as we navigate to second page and beyond we lose the functionality.

Upon researching the forum i discovered that data tables renders DOM for just the first page and we would have to re-invoke the functionality as we moved to different pages. So i tried doing the following

“drawCallback”: function (_settings) {
// Toggle
(function($) {

‘use strict’;

$(function() {
$(‘[data-plugin-toggle]’).each(function() {
var $this = $( this ),
opts = {};

var pluginOptions = $this.data(‘plugin-options’);
if (pluginOptions)
opts = pluginOptions;

$this.themePluginToggle(opts);
});
});

}).apply(this, [jQuery]);
}

However when i do this the pagination functionality of the data-tables goes away, since i am referring to the whole [data-plugin-toggle] element. Please let me know how we can re-invoke the accordion functionality just for second page and beyond when embedded inside a datatable.

Thank you!!

---

[Support]

Hello, thanks for your purchase.

In our tests here, the initialization of toggles/accordions inside a DataTable trough drawCallback it’s working. Can you please share with us the HTML and JS code you are trying ? You can use a service like https://pastebin.com to generate a link with the code and share with us.

Would be great and even better if you can send a online test link with your project, so we can inspect the code and send the best solution for you.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts