html中对表一和表二的 id 做区分
<div class="ui-layout-center">
<div class="container-div">
<div class="row">
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
<table id="bootstrap-table-detail"></table>
</div>
</div>
</div>
</div>
js部分使用onLoadSuccess,当表格加载完成时根据当前数据(例如批次号:batchNo)获取第二张表,并且点击第一张表格的批次号字段可以触发queryTableDetail方法,展示当前批次下数据
<script th:inline="javascript">
$(function () {
queryTable();
});
function queryTable() {
var options = {
url: prefix + "/listBatchNo",
createUrl: prefix + "/add",
updateUrl: prefix + "/edit/{id}",
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
modalName: "全省证书日志",
columns: [
{
title: "序号",
align: 'center',
formatter: function (value, row, index) {
return $.table.serialNumber(index);
}
},
{
field: 'id',
title: '',
visible: false
},
{
field: 'batchNo',
title: '批次号',
align: 'center',
formatter: function (value, row, index) {
return '<a href="javaScript:queryTableDetail(\'' + value + '\')">' + value + '</a>';
}
},
{
field: 'checkNum',
title: '在线核查数量',
align: 'center'
},
{
field: 'notchangeNum',
title: '信息未变更数量',
align: 'center'
},
{
field: 'manageNum',
title: '管理人信息变更数量',
align: 'center'
},
{
field: 'changeNum',
title: '证书信息变更数量',
align: 'center'
}
],
onLoadSuccess: function (data) {
if (data.rows && data.rows.length > 0) {
var firstBatchNo = data.rows[0].batchNo;
queryTableDetail(firstBatchNo);
}
}
};
$.table.init(options);
}
function queryTableDetail(value) {
$('#bootstrap-table-detail').bootstrapTable('destroy');
var options = {
id: "bootstrap-table-detail",
url: prefix + "/list?batchNo=" + encodeURIComponent(value),
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
columns: [
{
field : 'certOu',
title : '名称',
align: 'center'
},{
field : 'certOu',
title : '单位',
align: 'center'
},{
field : 'certOu',
title : '部门',
align: 'center'
},{
field : 'certOu',
title : '手机号',
align: 'center'
},{
field : 'certOu',
title : '管理人变更',
align: 'center'
},{
field : 'certOu',
title : '信息变更',
align: 'center'
},{
field : 'certOu',
title : '核查时间',
align: 'center'
}]
};
$.table.init(options);
}
</script>