Multiple tables on same page

[builtbymonkey]

I am trying to add multiple tables with filters to the same page however only one table shows is there a method yet to add more than one table on the same page all tables have unique ID's

[cjohnsonuk]

make sure you initiate the script twice, once for each table ID

[builtbymonkey]

make sure you initiate the script twice, once for each table ID

Thanks for a quick response I'm being really dense how will I do that

[cjohnsonuk]

OK, Take a look at the demos here : https://www.tablefilter.com/alternating-rows.html Single table has <table id="demo" class="cities TF"> this table has an ID of demo and the script has

var tf = new TableFilter('demo', {
        base_path: 'tablefilter/',
        alternate_rows: true
    });
    tf.init();

see demo references in the first line

if you have multiple tables on the page with IDs of demo-X eg: <table id="demo-X" class="cities TF">

you need to define the table filter parameters for each table with the start of the config definition having the relevant ID

 var tf = new TableFilter('demo-X', {
        base_path: 'tablefilter/',
        alternate_rows: true
    });
    tf.init();

[builtbymonkey]

var tf = new TableFilter('demo-X', { base_path: 'tablefilter/', alternate_rows: true }); tf.init();

I'm doing that and still only one is showing.

`var tf = new TableFilter('demo', {// instruct TableFilter location to import ressources from base_path: '/wp-content/plugins/ag-holiday-export/js/dist/tablefilter/', col_0: 'select', col_3: 'select', col_5: 'select', alternate_rows: true, rows_counter: true, btn_reset: true, loader: true, mark_active_columns: true, highlight_keywords: true, no_results_message: true, sticky_headers: true, // Sticky headers with overrides exact_match: true, ignore_diacritics: true, help_instructions: false, responsive: true, clear_filter_text: 'ALL', paging: { results_per_page: ['Records: ', [25, 50, 100]] }, state: { types: ['local_storage'], filters: true, page_number: true, page_length: true, sort: true }, col_types: [ 'string', 'string', 'number', 'string', 'number', 'string' ],

            col_widths: [
                '200px', '150px', '350px',
                '200px', '120px', '270px'
            ],
            themes: [{ name: 'mytheme' }],
            extensions: [{
                name: 'advancedGrid',
                name: 'sort',
                images_path: '/wp-content/plugins/ag-holiday-export/js/dist/tablefilter/'
            }]
});
tf.init();`

and

` var tf = new TableFilter('holclub', { // instruct TableFilter location to import ressources from base_path: '/new-dashboard/wp-content/plugins/dc-sub-export/js/dist/tablefilter/', col_0: 'select', col_3: 'select', col_5: 'select', alternate_rows: true, rows_counter: true, btn_reset: true, loader: true, mark_active_columns: true, highlight_keywords: true, no_results_message: true, sticky_headers: true, // Sticky headers with overrides exact_match: true, ignore_diacritics: true, help_instructions: false, responsive: true, clear_filter_text: 'ALL', paging: { results_per_page: ['Records: ', [25, 50, 100]] }, state: { types: ['local_storage'], filters: true, page_number: true, page_length: true, sort: true }, col_types: [ 'string', 'string', 'number', 'string', 'number', 'string' ],

                                col_widths: [
                                    '200px', '150px', '350px',
                                    '200px', '120px', '270px'
                                ],
                                themes: [{ name: 'mytheme' }],
                                extensions: [{
                                    name: 'advancedGrid',
                                    name: 'sort',
                                images_path: '/new-dashboard/wp-content/plugins/dc-sub-export/js/dist/tablefilter/'
                            }]
                    });
                    tf.init();`

[builtbymonkey]

Resolved turned out to not be a tablefilter issue