Bootstrap Table
HTML
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Custom toolbar table</title>
<link rel="stylesheet" href="src/css/bootstrap.css">
<link rel="stylesheet" href="src/css/bootstrap-table.css">
<script src="src/js/jquery.min.js"></script>
<script src="src/js/bootstrap.min.js"></script>
<script src="src/js/bootstrap-table.js"></script>
</head>
<body>
<div class="container">
<h1>Custom Toolbar</h1>
<p>Use <code>toolbar</code> option to define the custom toolbars.</p>
<div id="toolbar">
<div class="form-inline" role="form">
<div class="form-group">
<input name="search" class="form-control" type="text" placeholder="Search">
</div>
<button id="ok" type="submit" class="btn btn-default">OK</button>
</div>
</div>
<table id="table"
data-toggle="table"
data-height="460"
data-side-pagination="client"
data-toolbar="#toolbar"
data-show-refresh="true"
data-show-toggle="true"
data-unique-id ="3"
data-show-columns="true"
data-query-params="queryParams"
data-response-handler="responseHandler"
data-url="data2.json">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
JavaScript
var $table = $('#table'),
$ok = $('#ok');
$(function () {
$ok.click(function () {
$table.bootstrapTable('refresh');
});
});
function queryParams() {
var params = {};
$('#toolbar').find('input[name]').each(function () {
params[$(this).attr('name')] = $(this).val();
//console.log(params);
});
return params;
}
function responseHandler(res) {
return res.rows;
}