Bootstrap Table

by wenyi

HTML

<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.css">
<div class="row">
  <div class="col-md-12">
  <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-3 toolbar"></div>
                <div class="col-md-3">
                    <select class="form-control">
                        <option value="All">Active PD's</option>
                        <option value="Inactive">Inactive PD's</option>
                        <option value="InProgress">In Progress</option>
                        <option value="NeedsApproval">Needs Approval</option>
                        <option value="Decision">Final</option>
                    </select>
                </div>
                <div class="pull-right">
                    <button class="btn btn-info">Print Selected</button>
                    <button class="btn btn-success">Add Position Description</button>
                </div>
            </div>
        </div>
    </div>
    <br />
<div class="row">
  <div class="col-md-12">
      <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>
</div>
</div>

  
  </div>
</div>

CSS

.toolbar .search {
  width: 100%;
  float: initial !important;
}

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').bootstrapTable({
        data: data,
        search: true,
        buttonsToolbar: '.toolbar'
    });
});