TableFilter
TableFilter copied to clipboard
How to add multiple TableFilters
I'm using this syntax but it's not working. Any help would be appreciated. Thank you.
The first table works, but not the second. I tried combining the two in a single init() but that didn't seem to work either.
var tf = new TableFilter('resourceTable', { base_path: 'wp-content/themes/Divi-child-viprs/js/tablefilter/',
single_filter: {
css_class: 'form-control',
},
alternate_rows: true,
highlight_keywords: true,
ignore_diacritics: true,
no_results_message: false,
btn_reset: {
text: 'Clear Results',
},
auto_filter: true,
rows_counter: false,
watermark: 'Search...',
loader: true,
status_bar: true,
rows_counter: {
text: 'Results: '
},
}); tf.init();
var tfs = new TableFilter('resourceTableSpanish', { base_path: 'wp-content/themes/Divi-child-viprs/js/tablefilter/',
single_filter: {
css_class: 'form-control',
},
alternate_rows: true,
highlight_keywords: true,
ignore_diacritics: true,
no_results_message: false,
btn_reset: {
text: 'Borrar resultados',
},
auto_filter: true,
rows_counter: false,
watermark: 'Buscar...',
loader: true,
status_bar: true,
rows_counter: {
text: 'Resultados: ',
},
}); tfs.init();
I guess this can't work because of Javascript syntax errors. Commas are used to separate elements in arrays or objects, but cannot be used after the last element. What is your browser console saying?
I'm not 100% sure what I did since it's been so long, but I think I just used one init() and used jQuery to translate the fields that I needed to.
I will say that's an awesome little library. The functionality is great. https://tvradenver.org/resources/
` var tf = new TableFilter('resourceTable', { base_path: 'wp-content/themes/Divi-child-viprs/js/tablefilter/',
single_filter: {
css_class: 'form-control',
},
alternate_rows: true,
highlight_keywords: true,
ignore_diacritics: true,
no_results_message: false,
btn_reset: {
text: 'Clear Results'
},
auto_filter: true,
rows_counter: false,
watermark: 'Search...',
loader: true,
status_bar: true,
rows_counter: {
text: 'Results: '
},
}); tf.init(); $('.spanishTable a.reset').text("Borrar resultados"); $('.spanishTable #flt0_resourceTable').attr('placeholder', 'Buscar...'); `