Search code examples
javascripthtmlbootstrap-table

bootstrap-table / How to add filter-control in table configuration


I'm trying to make a filter per column in Bootstrap-table.

I've seen a lot of sites that use the HTML data-filter-control tag to do this, but I want to do it in the javascript side; preferably on the table configuration attributes.

This is an HTML data-filter-control tag example:

  <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="prenom" data-filter-control="input" data-sortable="true">Prénom</th>
            <th data-field="date" data-filter-control="select" data-sortable="true">Date</th>
            <th data-field="examen" data-filter-control="select" data-sortable="true">Examen</th>
            <th data-field="note" data-sortable="true">Note</th>
        </tr>
    </thead>

Thank you all!


Solution

  • $(function () {
      $('#table').bootstrapTable({
        filterControl: true,
        disableUnusedSelectOptions: true,
    
        columns: [
          {
            field: "first_column",
            title: "First Column",
            filterControl: 'input',
            filterControlPlaceholder: "holder",
            filterStrictSearch: false
          },{
            field:  "second_column",
            title: "Second Column",
            filterControl: 'select',
            filterStrictSearch: false,
          },
        ]
    
      });
    });