bootstrapTable插件的引入及简单使用

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/[email protected]/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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