bootstrap-table表格如何实现分页，并可以模糊搜索

bootstrap-table表格如何实现分页，并可以模糊搜索
以下是实现效果
分页效果
查找操作

引入文件

<link rel="stylesheet" type="text/css" href="../css/bootstrap-table.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap-table-zh-CN.js" type="text/javascript" charset="utf-8"></script>

这是js代码

<script>
			$(function() {
   
			$.get("data.json",function (data) {
   
					$(".table").bootstrapTable({
   
						data:data
					})
					
				})

			})
		</script>

HTML页面
data-search = “true” 这个就是开启搜索框
data-pagination 设置为 true 会在表格底部显示分页条
data-field 该列映射的data的参数名(关键) 和json文件里的参数名一样，否则显示不出来
data-sortable 该列是否排序（表头显示双箭头）（关键）

<table class="table table-bordered "  data-search = "true" data-pagination="true">
					<thead>
						<tr class="">
							<th class="fize" data-field="ID" data-sortable = "true">ID</th>
							<th class="fize" data-field="name" data-sortable = "true">用户名</th>
							<th class="fize" data-field="email" data-sortable = "true">邮箱</th>
							<th class="fize" data-field="caozuo">操作</th>
						</tr>
					</thead>
					<tbody></tbody>
</table>

这是data.json页面

[
 {
	 "ID":1,
	 "name":"张三",
	 "email":"[email protected]",
	 "caozuo":"<div  class='btn-group'><button  type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>操作<span class='caret'></span></button><ul class='dropdown-menu'><li><a href='#'>编辑</a></li><li><a href='#' class='dele'>删除</a></li><li><a href='#'>锁定</a></li><li><a href='#'>修改密码</a></li></ul></div>"
 },
  {
	 "ID":2,
	 "name":"张三2",
	 "email":"[email protected]",
	 "caozuo":"<div  class='btn-group'><button  type='button' class='btn btn-default dropdown-toggle' data-toggle='