Bootstrap Table

by wenyi

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/develop/src/extensions//filter-control/bootstrap-table-filter-control.css">
<script type="module" src="https://rawgit.com/wenzhixin/bootstrap-table/a28cf981a7df0386819bc70c03dcce6d7f0502f5/src/bootstrap-table.js"></script>
<script type="module" src="https://rawgit.com/wenzhixin/bootstrap-table/develop/src/extensions//filter-control/bootstrap-table-filter-control.js"></script>
<button id="select1" class="btn btn-default">
    Select row with notDefaultId=1
</button>
<button id="select3" class="btn btn-default">
    Select row with notDefaultId=3
</button>
<button id="select5" class="btn btn-default">
    Select row with notDefaultId=5
</button>
<table id="table">
</table>

JavaScript

var data = [{
    "notDefaultId": "1",
    "first": "A",
    "second": "1",
    "third": "apple",
  },
  {
    "notDefaultId": "2",
    "first": "A",
    "second": "2",
    "third": "orange",

  },
  {
    "notDefaultId": "3",
    "first": "B",
    "second": "3",
    "third": "apple",
  },
  {
    "notDefaultId": "4",
    "first": "B",
    "second": "2",
    "third": "orange",
  },
  {
    "notDefaultId": "5",
    "first": "C",
    "second": "1",
    "third": "apple",
  }
];



$(function() {
  $('#table').bootstrapTable({
    filterControl: true,
    disableUnusedSelectOptions: true,
    data: data,
    columns: [{
        field: 'state',
        checkbox: true,
        align: 'center',
        valign: 'middle'
      },
      {
        field: 'notDefaultId',
        title: "notDefaultId"
      },
      {
        field: "first",
        title: "First",
        filterControl: 'input',
        filterControlPlaceholder: "Placeholder",
        filterStrictSearch: false
      }, {
        field: "second",
        title: "Second",
        filterControl: 'select',
        filterStrictSearch: true
      },
      {
        field: "third",
        title: 'Third',
        filterControl: 'select',
        filterStrictSearch: false
      }
    ]

  });

  $('#select1').on('click', function() {
    $('#table').bootstrapTable("checkBy", {
      field: 'notDefaultId',
      values: ["1"]
    });
  });
  
  $('#select3').on('click', function() {
    $('#table').bootstrapTable("checkBy", {
      field: 'notDefaultId',
      values: ["3"]
    });
  });
  
  $('#select5').on('click', function() {
    $('#table').bootstrapTable("checkBy", {
      field: 'notDefaultId',
      values: ["5"]
    });
  });

});