Bootstrap-table表格插件——自定义超链接列（＜a＞标签）实现

一、问题描述

工作的时候遇到一个需求，将一个原先只返回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"