For some days I've tried to implement Boostrap's Table Filter, but the filtering does not work. Could someone help me?
Here's the whole code:
<head>
<meta charset="UTF-8" />
<title>Teste</title>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/lukaskral/bootstrap-table/feature_lukaskral_bootstrap_table_filter_integration/src/bootstrap-table.js"></script><scriptsrc="../src/bootstrap-table-filter.js"></script>
<script src="../src/ext/bs-table.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://rawgit.com/lukaskral/bootstrap-table/feature_lukaskral_bootstrap_table_filter_integration/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="../src/bootstrap-table-filter.css">
</head>
<body>
<div id="filter-bar"> </div>
<table class="bootstrap-table"
id="tbl"
data-click-to-select="true"
data-toggle="table"
data-toolbar="#filter-bar"
data-show-columns="true"
data-show-filter="true"
data-show-toggle="true"
>
<thead>
<tr>
<th data-field="id" data-align="center" data-sortable="true">Item ID</th>
</tr>
</thead>
<tbody>
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</tbody>
</table>
<pre style="margin-top: 30px" id="log"></pre>
<script type="text/javascript">
$(function() {
$('#tbl').bootstrapTable();
$('#filter-bar').bootstrapTableFilter({
filters:[
{
field: 'id',
label: 'Item ID',
type: 'select',
values: [
{id: '0', label: '0'},
{id: '1', label: '1'},
{id: '2', label: '2'}
]
}
],
onSubmit: function() {
var data = $('#filter-bar').bootstrapTableFilter('getData');
console.log(data);
}
});
});
</script>
</body>
SOURCE OF INFORMATION