bootstrap的组件过少,新项目中引入github上星数较多的bootstrapTable插件。
一.演示
先看看简单的效果
组件已经比较完备,大部分正常功能都有了(分页,搜索,排序,筛选等),样式略丑不过影响不大。
二.代码
1.html部分
<table id="table"></table>
2.js部分
window.onload = () => {
//先生成20个重复数据作为实际数据来使用
let data = new Array(20).fill({
id: 1,
name: "Item 1",
price: "$1"
});
$("#table").bootstrapTable({
pagination: true, //获得分页功能
pageSize: 15, //默认分页数量
pageList: [5, 10, 15, 20], //分页数量选项
search: true, //获得一个搜索框
striped: true, //开启斑马线
showColumns: true, //获得一个能选择显示某些列的按钮
showRefresh: true, //获得一个刷新数据按钮
columns: [{
field: "id",
title: "Item ID"
},
{
field: "name",
title: "Item Name"
},
{
field: "price",
title: "Item Price"
}
],
data: data
});
};
三.需要的js与css
1.先把我整理完下好的贴出来,大家可以自己去下载(私聊也行)
<!-- bootstrap的css -->
<link rel="stylesheet" href="helper/bootstrap/bootstrap.min.css">
<!-- bootstrap-table的css -->
<link rel="stylesheet" href="helper/bootstrap_table/bootstrap-table.min.css">
<!-- 一个纯css美化框架,可不要 -->
<link rel="stylesheet" href="helper/purecss/pure-min.css">
<!-- bootstrap基于jq -->
<script src="helper/bootstrap/jquery-3.4.1.js"></script>
<!-- bootstrap的js -->
<script src="helper/bootstrap/bootstrap.min.js"></script>
<!-- bootstrap-table的js -->
<script src="helper/bootstrap_table/bootstrap-table.min.js"></script>
<!-- bootstrap-table汉化包的js -->
<script src="helper/bootstrap_table/bootstrap-table-cn.js"></script>
这里有一点需要注意,它的部分图标还是依赖于bootstrap,所以我们项目里需要把bootstrap的font文件夹放在bootstrap.min.css的上一级。
2.这是可以直接使用的链接,如果只是想测试,直接引入这一堆就可以了
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>
四.常用属性
$("#table").bootstrapTable({
pagination: true, //获得分页功能
pageSize: 10, //默认分页数量
pageList: [5, 10, 15, 20], //分页数量选项
search: true, //获得一个搜索框
searchOnEnterKey: true, //按下回车才进行搜索(false的时候是即时搜索)
showColumns: true, //获得一个能选择显示某些列的按钮
showRefresh: true, //获得一个刷新数据按钮
showToggle: true, //获得一个切换为卡片式表格的按钮
toolbar: "#toolbar", //工具栏
columns: [
//开启复选框列
{
checkbox: "true"
},
{
field: "id", //字段
title: "Item ID", //表头名
sortable: "false", //开启排序按钮
order: "asc", //排序方式
align: "center", //表内容居中
halign: "center", //表头居中
width: 50,
visible: "true" //是否可视,默认就为true
},
{
field: "name",
title: "Item Name"
},
{
field: "price",
title: "Item Price"
}
],
data: data
});
五.相关文档链接
官方文档:https://bootstrap-table.com/
中文文档:https://blog.csdn.net/yapengliu/article/details/80191699