SpringMVC+bootstrap table实例详解

<!-- Bootstrap --> <link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external nofollow"    rel="stylesheet"> <link href="${contextPath }/static/bootstrap/table/bootstrap-table.css" rel="external nofollow"    rel="stylesheet"> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->   <script src="${contextPath }/static/jquery/jquery.min.js"></script>   <!-- Include all compiled plugins (below), or include individual files as needed -->   <script src="${contextPath }/static/bootstrap/js/bootstrap.min.js"></script>   <script src="${contextPath }/static/bootstrap/table/bootstrap-table.js"></script>   <script src="${contextPath }/static/bootstrap/table/locale/bootstrap-table-zh-CN.js"></script> 

<div class="container-fluid">     <div id="toolbar" class="btn-group">       <button id="btn_add" type="button" class="btn btn-default">         <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增       </button>       <button id="btn_edit" type="button" class="btn btn-default">         <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改       </button>       <button id="btn_delete" type="button" class="btn btn-default">         <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除       </button>       <button id="btn_info" type="button" class="btn btn-default">         <span class="fa fa-info" aria-hidden="true"></span>详情       </button>     </div>     <table id="table_sysUser"></table>   </div> 

//项目根目录 var path = $("#contextPath").val(); $(document).ready(function() {   //初始化Table   var oTable = new TableInit();   oTable.Init();   //初始化页面上面的按钮事件   $("#btn_add").click(function(){     //新增   });   $("#btn_edit").click(function(){     //编辑   });   $("#btn_info").click(function(){     //详情   });   $("#btn_delete").click(function(){     //删除   }); }); var TableInit = function () {   var oTableInit = new Object();   //初始化Table   oTableInit.Init = function () {     $('#table_sysUser').bootstrapTable({       url: path+'/sysuser/findUser.action',     //请求后台的URL（*）       method: 'post',           //请求方式（*）       toolbar: '#toolbar',        //工具按钮用哪个容器       striped: true,           //是否显示行间隔色       cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）       pagination: true,          //是否显示分页（*）       sortable: true,           //是否启用排序       sortName:"id",       sortOrder: "desc",          //排序方式       queryParams: oTableInit.queryParams,//传递参数（*）       queryParamsType: 'limit',       sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）       pageNumber:1,            //初始化加载第一页，默认第一页       pageSize: 15,            //每页的记录行数（*）       pageList: [10, 15, 20, 50],    //可供选择的每页的行数（*）       search: true,            //是否显示表格搜索       strictSearch: true,       showColumns: true,         //是否显示所有的列       showRefresh: true,         //是否显示刷新按钮       minimumCountColumns: 2,       //最少允许的列数       clickToSelect: true,        //是否启用点击选中行       //height: 500,            //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度       uniqueId: "id",           //每一行的唯一标识，一般为主键列       showToggle:true,          //是否显示详细视图和列表视图的切换按钮       cardView: false,          //是否显示详细视图       detailView: false,          //是否显示父子表       contentType: "application/x-www-form-urlencoded", //解决POST提交问题       columns: [            {checkbox: true },       {title:'用户名称',field: 'userName',sortable:true },       {title:'手机号码',field: 'phone',sortable:true,          formatter:function(v,r,i){           if(v){             return v.substring(0,3)+"****"+v.substring(7,4);           }           return v;         }         },       {title:'邮箱账号',field: 'email',sortable:true },       {title:'生日',field: 'birthday',sortable:true },       {title:'部门',field: 'departmentKey',sortable:true,         formatter:function(v,r,i){           if(r.departmentValue){             return r.departmentValue;           }           return "";         }       },       {title:'最后登录时间',field: 'lastLogintime',sortable:true },       {title:'性别',field: 'sex',sortable:true,         formatter:function(v,r,i){           switch (Number(v)) {           case 1:             return "男";             break;           case 2:             return "女";             break;           default:             return "未知";             break;           }         }       },       {title:'用户状态',field: 'status',sortable:true,         formatter:function(v,r,i){           return r.statusCn == "false"?"启用":"禁用";         }       },       {title:'所属公司编号',field: 'companyId',sortable:true },       {title:'注册时间',field: 'createTime',sortable:true },       {title:'用户头像',field: 'userhead',sortable:true },       {title:'职位',field: 'positionKey',sortable:true},       {title:'角色',field:'role'}]     });   };   //得到查询的参数   oTableInit.queryParams = function (params) {     var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的       pageSize: params.limit,  //页面大小   <span style="white-space:pre">    </span>pageNumber: params.pageNumber, //页码   <span style="white-space:pre">    </span>sortName: params.sort,<span style="white-space:pre"> </span>//排序列名   <span style="white-space:pre">    </span>sortOrder:params.order,<span style="white-space:pre">  </span>//排序方式   <span style="white-space:pre">    </span>searchText:params.search<span style="white-space:pre">  </span>//搜索框参数     };     return temp;   };   return oTableInit; }; 

oTableInit.queryParams = function (params) {     var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的       pageSize: params.limit,  //页面大小       pageNumber: params.pageNumber, //页码       sortName: params.sort, //排序列名       sortOrder:params.order, //排序方式       searchText:params.search,  //搜索框参数       searchText:params.search,  //搜索框参数     };     return temp;   }; 

var rowData = $("#table_sysUser").bootstrapTable("getSelections");

$('#table_sysUser').bootstrapTable('refresh');