89 lines
2.8 KiB
HTML
89 lines
2.8 KiB
HTML
<html>
|
|
<head>
|
|
<title>How to use the filter extension</title>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
|
|
<link rel="stylesheet" href="../assets/examples.css">
|
|
<script src="../assets/jquery.min.js"></script>
|
|
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
|
|
<script src="../assets/bootstrap-table-filter/extension/bootstrap-table-filter.js"></script>
|
|
<script src="../assets/bootstrap-table-filter/bootstrap-table-filter.js"></script>
|
|
<script src="../assets/bootstrap-table-filter/bs-table.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>How to use the filter extension (<a href="https://github.com/wenzhixin/bootstrap-table/issues/561" target="_blank">#561</a>).</h1>
|
|
<div id="filter-bar"> </div>
|
|
|
|
<table id="table" data-height="299" data-toolbar="#filter-bar"
|
|
data-show-toggle="true" data-show-columns="true" data-show-filter="true" data-search="true">
|
|
<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>
|
|
|
|
<script>
|
|
|
|
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) ",
|
|
'id':5
|
|
},
|
|
{
|
|
"name": "multiple-select",
|
|
"stargazers_count": "288",
|
|
"forks_count": "150",
|
|
"description": "A jQuery plugin to select multiple elements with checkboxes :)",
|
|
'id':4
|
|
},
|
|
{
|
|
"name": "bootstrap-show-password",
|
|
"stargazers_count": "32",
|
|
"forks_count": "11",
|
|
"description": "Show/hide password plugin for twitter bootstrap.",
|
|
'id':3
|
|
},
|
|
{
|
|
"name": "blog",
|
|
"stargazers_count": "13",
|
|
"forks_count": "4",
|
|
"description": "my blog",
|
|
'id':2
|
|
},
|
|
{
|
|
"name": "scutech-redmine",
|
|
"stargazers_count": "6",
|
|
"forks_count": "3",
|
|
"description": "Redmine notification tools for chrome extension.",
|
|
'id':1
|
|
}
|
|
];
|
|
|
|
$(function() {
|
|
$('#table').bootstrapTable({data: data});
|
|
$('#filter-bar').bootstrapTableFilter({
|
|
connectTo: '#table',
|
|
onAll: function(name, args) {
|
|
var d = new Date();
|
|
$('#log').prepend(d.toLocaleString() + ': ' + name + "\n");
|
|
},
|
|
onSubmit: function(data) {
|
|
var data = $('#filter-bar').bootstrapTableFilter('getData');
|
|
var d = new Date();
|
|
$('#log').prepend(d.toLocaleString() + ': ' + JSON.stringify(data) + "\n");
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |