koalyptus / TableFilter

A Javascript library making HTML tables filterable and a bit more :)
https://www.tablefilter.com
MIT License
324 stars 95 forks source link

How to add multiple TableFilters #795

Open marketingstarz opened 3 years ago

marketingstarz commented 3 years ago

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();

rimace commented 3 years ago

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?

marketingstarz commented 3 years ago

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...'); `