什么是bootstrap-table
本文介绍的bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行、移动列位置等一些特殊的功能,插件可以用基于HTML5的data-*属性标识设置,也可以使用Javascript方式进行设置,非常方便。
即bootstrap-table是一款插件。
引入文件相关文件
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.13.4/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.13.4/bootstrap-table.min.js"></script>
建一个table
<div class="container">
//data-url代表引用数据所在的地址
//data-pagination代表是否分页
<table id="table"
data-toggle="table"
data-url="data/data1.json"
data-show-columns="true"
data-show-refresh="true"
data-show-toggle="true"
data-pagination="true"
data-height="500">
<thead>
<tr>
<th data-field="id" data-formatter="idFormatter">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
给每一列加编号
function idFormatter(value) {
return value + 1;
}
整体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.13.4/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.13.4/bootstrap-table.min.js"></script>
</head>
<body>
<div class="container">
<table id="table"
data-toggle="table"
data-url="data/data1.json"
data-show-columns="true"
data-show-refresh="true"
data-show-toggle="true"
data-pagination="true"
data-height="500">
<thead>
<tr>
<th data-field="id" data-formatter="idFormatter">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
function idFormatter(value) {
return value + 1;
}
</script>
</body>
</html>
效果:
注意:引入data1.json文件时要特别注意,文件名错误或者路径不对,都会报跨域请求错误
我这边的结构如下: 所以用的路径是 data-url="data/data1.json"
代码链接:https://pan.baidu.com/s/101ofoGCFtpxrS46JhlUcnQ
提取码:ddnc
-------------------本文完-------------------