Bootstrap Table Filter Control

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<table id="orders-table" data-search="false" data-striped="true" data-pagination="true" data-filter-control="true" data-side-pagination="client" data-page-size="10" data-page-list="[10, 25, 50, 100, ALL]">
    <thead>
        <tr>
            <th data-field="id" data-halign="left" data-align="right" data-filter-control="input">ID</th>
            <th data-field="status" data-filter-control="select">Status</th>
            <th data-field="received" data-filter-control="datepicker" data-filter-datepicker-options='{"autoclose":true, "clearBtn": true, "todayHighlight": true, "orientation": "top"}'>Received</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>231</td>
            <td>In Progress</td>
            <td>07/02/2015</td>
        </tr>
        <tr>
            <td>230</td>
            <td>Cancelled</td>
            <td>07/05/2015</td>
        </tr>
        <tr>
            <td>219</td>
            <td>Complete</td>
            <td>07/09/2015</td>
        </tr>
    </tbody>
</table>

CSS

/**
 * @author zhixin wen <[email protected]>
 * version: 1.8.1
 * https://github.com/wenzhixin/bootstrap-table/
 */
 .bootstrap-table .table {
    margin-bottom: 0 !important;
    border-bottom: 1px solid #dddddd;
    border-collapse: collapse !important;
    border-radius: 1px;
}
.bootstrap-table .table, .bootstrap-table .table > tbody > tr > th, .bootstrap-table .table > tfoot > tr > th, .bootstrap-table .table > thead > tr > td, .bootstrap-table .table > tbody > tr > td, .bootstrap-table .table > tfoot > tr > td {
    padding: 8px !important;
}
.bootstrap-table .table.table-no-bordered > thead > tr > th, .bootstrap-table .table.table-no-bordered > tbody > tr > td {
    border-right: 2px solid transparent;
}
.fixed-table-container {
    position: relative;
    clear: both;
    border: 1px solid #dddddd;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
.fixed-table-container.table-no-bordered {
    border: 1px solid transparent;
}
.fixed-table-footer, .fixed-table-header {
    overflow: hidden;
}
.fixed-table-footer {
    border-top: 1px solid #dddddd;
}
.fixed-table-body {
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;
}
.fixed-table-container table {
    width: 100%;
}
.fixed-table-container thead th {
    height: 0;
    padding: 0;
    margin: 0;
    border-left: 1px solid #dddddd;
}
.fixed-table-container thead th:first-child {
    border-left: none;
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
}
.fixed-table-container thead th .th-inner, .fixed-table-container tbody td .th-inner {
    padding: 8px;
    line-height: 24px;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fixed-table-container thead th .sortable {
    cursor: pointer;
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 30px;
}
.fixed-table-container thead th .both {
   ...