目录
一、问题描述
工作的时候遇到一个需求，将一个原先只返回TOP10数据的表格改为显示全部数据并添加分页功能。因此打算使用bootstrap-table插件实现前端分页。
这个表格有一列是超链接列，其href要根据每一条数据的id来指定。而bootstrap-table提供的属性column只能通过formatter统一指定一列按钮的样式，属性data又只能传json格式的数据，因此无法通过column和data实现每一行的超链接都能跳转到不同页面的效果。
二、解决方案
1. 使用bootstrap-table的events注册事件
我想的第一个解决办法就是看bootstrap-table还有什么其他提供的属性可以使用，然后在网上找到了一个bootstrap-table绑定按钮与事件的解决方法。就是在column属性中指定某一列的events，给它注册事件。例子见文末参考博客3。不过这个解决方法需要将a标签改为button，使用了click事件而不是href跳转，因此没有采用。
2. 当页码或单页记录数改变时，重新设置每个链接的href
第二个解决方法，也就是下文将详细阐述的方法。首先初始化加载第一页每个链接的href，然后在每一次页码或单页记录数改变时，重新设置。每一次加载都要遍历从后端获取的json数据，也就是要填入表格的数据，根据每一条数据的id来指定href。
三、具体实现
1. 下载Bootstrap-table表格及汉化插件并引入
- 官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/
- Github地址： https://github.com/wenzhixin/bootstrap-table
- 中文文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
引入：
<link href="static/bootstrap4/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="static/bootstrap4/css/bootstrap-table.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="static/bootstrap4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/bootstrap4/js/bootstrap-table.js"></script>
<script type="text/javascript" src="static/bootstrap4/js/bootstrap-table-zh-CN.js"></script>
2. bootstrap-table基础使用方法+自定义超链接列
HTML
这里使用了thead和tbody，直接使用table标签也可。
<table class="table table-hover table-bordered" id="result_table">
<thead class="thead-light">
<tr id="head_row"></tr>
</thead>
<tbody id="tbody"></tbody>
</table>
JS
- 每一次加载之前先销毁先前的表格
// 清空表格
$("#head_row").empty();
$("#tbody").empty();
var result_table = $("#result_table");
result_table.bootstrapTable('destroy'); //动态加载表格之前，先销毁表格
-
遍历要填入表格的json数据结果，处理好要填入column和data的部分
（field_map是定义好的域。result就是要填入表格的json数据结果）
var fields, allData = [];
// 遍历结果，设置列和数据
$.each(result, function (i, json_obj) {
fields = setField();
allData.push(setData(json_obj));
});
// 设置分页的数据
function setData(json_obj) {
var data =
{
'sex_and_age': json_obj['sex'] + " " + json_obj['age'],
'zhusu': json_obj['zhusu'],
'xianbingshi': json_obj['xianbingshi'],
'diag_in': json_obj['diag_in'],
'zhenduanyiju': json_obj['zhenduanyiju'],
'jianbiezhenduan': json_obj['jianbiezhenduan']
};
return data;
}
// 设置分页的列
function setField() {
// 操作按钮列（超链接列）
var fields = [
{
field: 'operation',
formatter: buttonFormatter
}
];
// 其它列
$.each(field_map, function (field) {
var oneField = {
title: '',
field: '',
width: ''
}
oneField.title = field_map[field][0];
oneField.field = field;
oneField.width = field_map[field][1];
fields.push(oneField);
});
return fields;
}
// 详情按钮列样式
function buttonFormatter() {
return "<a class='btn btn-sm btn-primary ' target='_blank'>详情</a>";
}
注：这里不能直接在buttonFormatter中定义href，否则每个href都是一样的，最后就都是result中最后一个结果的id。
- 设置bootstrap分页
var tbody = $("#tbody");
// bootstrap table分页
result_table.bootstrapTable({
columns: fields, // 表头
data: allData, // 数据
cache: false, // 缓存
striped: true, // 是否显示行间隔色
pagination: true, // 是否启用分页
sidePagination: 'client', //server:服务器端分页|client：前端分页
pageNumber: 1, // 初始化加载第1页
pageSize: 5, // 默认单页记录数
pageList: [5, 10, 20, 50], // 可供选择的单页记录数
paginationHAlign: "left", // 分页位置
paginationDetailHAlign: "right", // 分页详情
locale: 'zh-CN', // 中文设置
valign: 'top', // 单元格（cell）对齐方式
onPageChange: function onPageChange(number, size) {
// 当页码或单页记录数改变时，重新设置每个详情链接
tbody.find("a").each(function (i, item) {
var curr = (number - 1) * size + i;
$(item).attr("href", "detail?hostid=" + result[curr]["hostid"]);
})
}
});
// 设置首次加载的详情链接
tbody.find("a").each(function (i, item) {
$(item).attr("href", "detail?hostid=" + result[i]["hostid"]);
})
这里的重点就是onPageChange中的方法，每次改变页码或单页记录数，就要重新设置href。当然也不要忘记设置好初始化加载页的href。