Bootstrap Table

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://raw.githubusercontent.com/wenzhixin/bootstrap-table-examples/master/assets/bootstrap-table-filter/extension/bootstrap-table-filter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/1.9.0/dist/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<p>Problem description:</p>
<p>If we choose <b> "First" : "A"  </b> than on filter <b> "Second" option "3" </b> shoud be  <b>disabled / deactivated </b>. <br>
Generally it would be great to update all filter options after each filtering action.</p>
<table id="table" data-search="true">
    <thead>
    <tr>
        <th data-field="first">First</th>
        <th data-field="second">Second</th>
        <th data-field="third" >Third</th>
    </tr>
    </thead>
</table>

JavaScript

var data = [
    {
        "first": "A",
        "second": "1",
        "third": "apple",
    },
    {
        "first": "A",
        "second": "2",
        "third": "orange",
        
    },
    {
        "first": "B",
        "second": "3",
        "third": "apple",
    },
    {
        "first": "B",
        "second": "2",
        "third": "orange",
    },
    {
        "first": "C",
        "second": "1",
        "third": "apple",
    }
];

$(function () {
    $('#table').bootstrapTable({
        filterControl: true,
        showRefresh:true,
        data: data,
        columns: [
      {
        field: "first",
        title: "First",
        filterControl: 'select',
        filterStrictSearch: false
    },{
        field:  "second",
        title: "Second",
        filterControl: 'select',
        filterStrictSearch: true
        },
       {
        field: "third",
        title: 'Third',
        filterControl: 'select',
        filterStrictSearch: false
    }        
        ]
        
    });
});