Bootstrap Table是基于Bootstrap的轻量级表格插件，只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。 因公司的项目需要实现用户管理的表格实现，所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台。 示例截图： 
客户端代码：
//引入的CSS文件 <link href="../public/static/css/bootstrap.min.css" rel="stylesheet" /><link href="../public/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">//引入的js文件 <script src="../public/static/js/jquery.min.js"></script> <script src="../public/static/js/bootstrap.min.js"></script> <script src="../public/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script> <script src="../public/static/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>html文件代码
<div class="panel panel-default"> <div class="panel-heading"> 查询条件 </div> <div class="panel-body form-group" style="margin-bottom:0px;"> <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名：</label> <div class="col-sm-2"> <input type="text" class="form-control" name="Name" id="search_name"/> </div> <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">手机号：</label> <div class="col-sm-2"> <input type="text" class="form-control" name="Name" id="search_tel"/> </div> <div class="col-sm-1 col-sm-offset-4"> <button class="btn btn-PRimary" id="search_btn">查询</button> </div> </div></div><table id="mytab" class="table table-hover"></table><div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;"> <button id="btn_edit" type="button" class="btn btn-default" style="display: none; border-radius: 0"> <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default" style="display: none;"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> </div>js文件代码：
//根据窗口调整表格高度 $(window).resize(function() { $('#mytab').bootstrapTable('resetView', { height: tableHeight() }) })//生成用户数据 $('#mytab').bootstrapTable({ method: 'post', contentType: "application/x-www-form-urlencoded",//必须要有！！！！ url:"../index.php/admin/index/userManagement",//要请求数据的文件路径 height:tableHeight(),//高度调整 toolbar: '#toolbar',//指定工具栏 striped: true, //是否显示行间隔色 dataField: "res",// pageNumber: 1, //初始化加载第一页，默认第一页 pagination:true,//是否分页 queryParamsType:'limit',//查询参数组织方式 queryParams:queryParams,//请求服务器时所传的参数 sidePagination:'server',//指定服务器端分页 pageSize:10,//单页记录数 pageList:[5,10,20,30],//分页步进值 showRefresh:true,//刷新按钮 showColumns:true, clickToSelect: true,//是否启用点击选中行 toolbarAlign:'right',工具栏对齐方式 buttonsAlign:'right',//按钮对齐方式 toolbar:'#toolbar',//指定工作栏 columns:[ { title:'全选', field:'select', //复选框 checkbox:true, width:25, align:'center', valign:'middle' }, { title:'ID', field:'ID', visible:false }, { title:'登录名', field:'LoginName', sortable:true }, { title:'姓名', field:'Name', sortable:true }, { title:'手机号', field:'Tel', }, { title:'邮箱', field:'Email' }, { title:'注册日期', field:'CreateTime', sortable:true }, { title:'状态', field:'Attribute', align:'center', //列数据格式化 formatter:OperateFormatter } ], locale:'zh-CN',//中文支持 }) //三个参数，value代表该列的值 function operateFormatter(value,row,index){ if(value==2){ return '<i class="fa fa-lock" style="color:red"></i>' }else if(value==1){ return '<i class="fa fa-unlock" style="color:green"></i>' }else{ return '数据错误' } } //请求服务数据时所传参数 function queryParams(params){ return{ //每页多少条数据 pageSize: params.limit, //请求第几页 pageIndex:params.pageNumber, Name:$('#search_name').val(), Tel:$('#search_tel').val() } } //查询按钮事件 $('#search_btn').click(function(){ $('#mytab').bootstrapTable('refresh', {url: '../index.php/admin/index/userManagement'}); })传入后台的数据： 
后台传来的数据 
只勾选一项，可以修改删除 
勾选多项只能删除 
新闻热点
疑难解答
