bootstrapTable demo

1.引入bootstrapTable 的js文件

<!-- bootstrap-table Js --> <script src="static/common/bootstrap/js/dataTables/bootstrap-table.js"></script> <!-- 汉化bootstrap-table Js --> <script src="static/common/bootstrap/js/dataTables/bootstrap-table-zh-CN.js"></script>

2.声明bootstrapTable 的dom对象

<table id="mDataTables" class="table table-striped table-bordered table-hover"></table>

3.js编码

function createTable(){ $("#mDataTables").bootstrapTable('destroy'); $("#mDataTables").bootstrapTable({ url : 'admin/usermanager/page', //action请求 pagination : true, //是否显示分页 striped : true, //是否显示行间隔色 search :false, //是否启用搜索框 sortOrder :"asc",//排序方式 queryParamsType : '', queryParams : function(param){ var temp = { //里面键的名字和控制器中变量名一致，改动要同步 pageNumber:param.pageNumber,//页码 pageSize:param.pageSize, //页面大小，默认为10行 name:$("#searchName").val(), //查询账号信息，可为空 roleId:$("#groupSelect").val(), //查询角色信息，可为空 parentId:null, sortName:this.sortName, sortOrder:this.sortOrder, }; return temp; }, cache : false, //是否使用缓存，默认为true 一般情况需要设置(*) pageNumber : 1, pageSize : 10, pageList : [ 10, 30, 50 ,100],//可选的每页数据 //toolbar : "#toolbar",// 工具栏按钮 showColumns : true, // 显示隐藏列 showRefresh : false, // 显示刷新按钮 uniqueId : "id", // 每一行的唯一标识 sidePagination : "server", // 分页方式：client客户端分页，server服务端处理分页(*) dataType : "json", //期望返回类型 dataFiled : "rows", minimumCountColumns : 2,//最小允许列数 clickToSelect :false,//是否允许点击选中行 columns : [ { field : 'check', checkbox : true, align : 'center', valign : 'middle' }, { title : '账户', field : 'name', // 字段 align : 'center', // 对齐方式（左 中 右） valign : 'middle', // //sortable : true , //是否可排序 //order : "desc" //默认排序方法 }, { title : '组域', field : 'role', align : 'center', valign : 'middle', }, { title : '名称', field : 'loanCompanies.companyName', align : 'center', valign : 'middle' }, { title : '创建时间', field : 'createDate', align : 'center', valign : 'middle', sortable : true , width : 130, }, { title : '更新时间', field : 'updateDate', align : 'center', valign : 'middle', sortable : true , width : 130, }, { title : '状态', field : 'status', align : 'center', valign : 'middle', }, { title : '操作', field : 'operation', align : 'center', valign : 'middle', width : 260 } ], }); }