How to target single table when initializing layout globally

Kuronuma

Hello!

I'm using JQuery to initialize DataTables for all tables that use a specific style class. I'm novice with JQuery, but I've been able to piece things together so far using examples and experimentation. However, I'm wondering if you can help me with this.

As you can see below, I've added a button to my layout which resets/clears the sort order, page length, current page, and search filter. However, when I click the button, it resets all tables on the page, not just the current table.

I've tried to use the JQuery .data() method to get the aria-controls attribute of the button and then target a single table using the getElementById method. However, it seems that this won't work because I'm defining this button within the initialization of the table itself, and the id of the table and aria-controls attribute of the button don't exist yet.

Can I define the button's function outside of the initialization of the table? How would you recommend I approach this problem?

Thank you so much for your help!

var table = $('.TableStyle-SmartTable').DataTable({ 
            orderMulti: true,
            orderNumbers: true,
            responsive: true,
            buttons: true,
            "layout": { 
                topStart: null,
                topEnd: {
                        buttons: [
                            {
                                text: 'Reset',
                                className: 'dt-resetButton',
                                action: function (e, dt, node, config) {
                                    table.order.neutral().draw(); // resets the sort order
                                    table.search('').draw(); // clears the filter
                                    table.page.len( 10 ).draw(); // resets the "Show X Entries" menu to 10, the default
                                    table.page(0).draw('page'); // returns user to first page of the table
                                }
                            }
                        ],
                        search: {
                            text: 'Filter:',
                            placeholder: 'Enter keyword or phrase'
                        },
....so on and so forth

kthorngren

See the buttons.buttons.action docs. The function looks like this:

action: function (e, dt, node, config) {

The dt parameter is the Datatables API for that particular Datatable. Resplace table with dt, like this:

                                    dt.order.neutral().draw(); // resets the sort order
                                    dt.search('').draw(); // clears the filter
                                    dt.page.len( 10 ).draw(); // resets the "Show X Entries" menu to 10, the default
                                    dt.page(0).draw('page'); // returns user to first page of the table

Kevin

Kuronuma

@kthorngren I cannot believe I missed that! Thank you so much! You made my day.