Bootstrap Table

by jimkennelly

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/thornomad/bootstrap-table/filterby-array/src/bootstrap-table.js"></script>
<table id="table">
    <thead>
    <tr>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>
<button id="filter-by-array">filter by with array</button>
<button id="filter-by">filter by text</button>
<button id="clear">clear</button>

JavaScript

var data = [{
  "name": "bootstrap-table",
  "stargazers_count": "526",
  "forks_count": "122",
  "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
}, {
  "name": "multiple-select",
  "stargazers_count": "288",
  "forks_count": "150",
  "description": "A jQuery plugin to select multiple elements with checkboxes :)"
}, {
  "name": "bootstrap-show-password",
  "stargazers_count": "32",
  "forks_count": "11",
  "description": "Show/hide password plugin for twitter bootstrap."
}, {
  "name": "blog",
  "stargazers_count": "13",
  "forks_count": "4",
  "description": "my blog"
}, {
  "name": "scutech-redmine",
  "stargazers_count": "6",
  "forks_count": "3",
  "description": "Redmine notification tools for chrome extension."
}];

$(function() {
  $table = $('#table');
  $table.bootstrapTable({
    data: data
  });

  $('#clear').click(function() {
    $table.bootstrapTable('filterBy', {});
  });

  $('#filter-by-array').click(function() {
    $table.bootstrapTable('filterBy', {
      name: ["multiple-select", "blog"]
    });
  });

  $('#filter-by').click(function() {
    $table.bootstrapTable('filterBy', {
      name: "bootstrap-table"
    });
  });
});