bootstrap table插件
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-3.3.5-dist/css/bootstrap-table.css" rel="stylesheet">
<script src="jQuery/jquery-1.8.2.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap-table.js"></script>
</head>
<body>
<div id="custom-toolbar">
<div class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
<table data-url="data2.json" data-toggle="table" data-height="299" data-click-to-select="true" data-toolbar="#custom-toolbar" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
<thead>
<tr>
<th data-field="id" data-align="right">Item ID</th>
<th data-field="name" data-align="center">Item Name</th>
<th data-field="price" data-align="">Item Price</th>
</tr>
</thead>
</table>
</body>
</html>