1.第一步，引进额外的 js、css，不被bootstrap.js/css所包含
<link href="${ctx}/styles/bootstrap/css/bootstrap-table.min.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx}/js/bootstrap-table/bootstrap-table.min.js"></script>
<!--table插件的文本翻译成中文-->
<script type="text/javascript" src="${ctx}/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
2.html的方式定义table
<table id="OperatelistTable" data-toggle="table" id="table" data-url='${ctx}/fee/getList.shtml'
data-query-params="createParams"
data-side-pagination="server" data-pagination="true" data-page-list="[5,8,10]"
data-pagination-first-text="<<" data-pagination-pre-text="<"
data-pagination-next-text=">" data-pagination-last-text=">>" data-toolbar=".toolbar">
<thead>
<tr>
<th data-field="id" data-align="center" data-visible="false"></th>
<th data-field="admin.account" data-align="center">操作人</th>
<th data-field="createDate" data-align="center" data-formatter="formatDate">操作时间</th>
<th data-field="realRepayAmount" data-align="left" data-formatter="formatRecord">操作内容</th>
</tr>
</thead>
</table>
3.js的方式定义table
var TableInit = function() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function() {
$('#tb_user').bootstrapTable({
url : '${ctx}/knuser/findByPage.shtml', //请求后台的URL（*）
//若为post，需要指定contentType : "application/x-www-form-urlencoded"，否则controller会接收不到，
//因为如果不指定contentType的话就会默认以application/json的方式发送数据，java就不能用getParameter拿到内容了，但是可以用输入流接收
method : 'get', //请求方式（*）
striped : true, //是否显示行间隔色
cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination : true, //是否显示分页（*）
sortable : false, //是否启用排序
sortOrder : "asc", //排序方式
queryParams : oTableInit.queryParams,//传递参数（*）
sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber : 1, //初始化加载第一页，默认第一页
pageSize : 10, //每页的记录行数（*）
pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
strictSearch : true,
showColumns : true, //是否显示所有的列
showRefresh : true, //是否显示刷新按钮
clickToSelect : true, //是否启用点击选中行
//height : 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId : "ID", //每一行的唯一标识，一般为主键列
showToggle : false, //是否显示详细视图和列表视图的切换按钮
cardView : false, //是否显示详细视图
detailView : false, //是否显示父子表
showRefresh: false, //右上角不显示刷新按钮
showColumns: false, //不显示列选择按钮
columns : [ {
field : 'name',
title : '姓名',
formatter: function (value, row, index) {
var url="/user/detail.shtml?id="+row.id;
var html="<a href=\"javascript:tbLoad('"+url+"')\">"+value+"</a>";
return html;
}
}, {
field : 'verifyTime',
title : '实名时间',
//——修改——获取日期列的值进行转换
formatter: function (value, row, index) {
var unixTimestamp = new Date(value);
var commonTime = unixTimestamp.format("yyyy-MM-dd hh:mm");
return commonTime;
}
} ]
});
};
//得到查询的参数
oTableInit.queryParams = function(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit : params.limit, //页面大小
offset : params.offset/10+1, //页码
key : $("#txt_search_key").val(),
startDate:oDatepicker.startDate,
endDate:oDatepicker.endDate,
platform:$("#select_platform").val(),
version:$("#select_version").val()
};
return temp;
};
return oTableInit;
};
4.禁止自动加载
如果定义table的时候指定了url的值，页面刚出来就会立即加载一次数据，如果不希望这样，就在定义的时候不设置url或者url:''
然后在需要加载的时候调用$('#tb_order').bootstrapTable('refreshOptions', {url: '${ctx}/order/findByPage.shtml'});
注意：refreshOptions和refresh的区别是refreshOptions会改变table的属性值，refresh不会改变旧的url以至于虽然此次调用刷新了表格但是分页的时候点击还是调用旧的url（如果旧的url没有值会导致点击下一页没有反应）；其共同点是都会根据新的url刷新表格
5.列响应多个时点击事件
image.png
html
<th data-field="id" data-align="center" data-formatter="formatOperate" data-events="operateEvents">操作</th>
js代码
$(function() {
window.operateEvents = {
'click .href_h': function (e, value, row, index) {
$("#listModal").modal({backdrop:false});
$("#listModal").modal({backdrop:false});
var url="search?id="+row.id;
$("#listmodal_table").bootstrapTable('refreshOptions',{'url':url});
return false;
},
'click .href_u': function (e, value, row, index) {
$("#editModal").modal({backdrop:false});
$("#form_data input[name='id']").val(row['id']);
$("#form_data input[name='channelId']").val(row['channelId']);
return false;
}
}
}
//动态生成操作链接的html
function formatOperate(value, row, index){
var html=["<a class=\"href_h\" href='javascript:void(0)'>历史记录</a>","<a class=\"href_u\" href='#'>修改</a>"];
return html.join(' ');
}
