codeigniter4 & bootstrap5-table

这部分是作为 PHP 做集合 bootstrap5/bootstrap-table 做服务端渲染的功能

如果有能力的话建议赞助 bootstrap-table 项目, 强力推荐的 bootstrap 扩展库

项目地址: https://github.com/wenzhixin/bootstrap-table

bootstrap-table 按照官方文档引入方式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bootstrap-table 分页</title>

    <!-- 引入 bootstrap 样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>

<!-- 表格 Begin -->
<table id="table">
    <thead>
    <tr>
        <th data-field="id">
            ID
        </th>
        <th data-field="name">
            Item Name
        </th>
        <th data-field="price">
            Item Price
        </th>
    </tr>
    </thead>
</table>
<!-- 表格 End   -->

<!-- 引入 bootstrap 类库, 目前 bootstrap-table 为了保持 bootstrap3/4 兼容性还依赖 jquery  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.js"></script>

<!-- bootstrap-table 的 i18n 语言支持, 支持 zh-CN/en-US/ja-JP 版本  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- 初始化脚本 -->
<script>

    /**
     * 测试数据
     */
    const data = [
        {
            id: 0,
            name: 'Item 0',
            _name_rowspan: 2,
            price: '$0'
        },
        {
            id: 1,
            price: '$1'
        },
        {
            id: 2,
            name: 'Item 2',
            price: '$2'
        },
        {
            id: 3,
            name: 'Item 3',
            price: '$3'
        },
        {
            id: 4,
            name: 'Item 4',
            price: '$4'
        },
        {
            id: 5,
            name: 'Item 5',
            price: '$5'
        }
    ];

    // 初始化
    window.addEventListener('load', () => {
        const $table = $('#table');
        $table.bootstrapTable({data})
    });

</script>
</body>
</html>

参考文档: https://examples.bootstrap-table.com

这里提供几个比较常用的初始化功能, 方便加深对 bootstrap-table 的日常使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!-- 表格设置,  这里采用 data-* 做初始化配置 -->
<!-- data-toggle: 激活 bootstrap-table 分页表格 -->
<!-- data-show-columns: 激活是否可以自由选择可见列 -->
<!-- data-show-refresh: 激活是否可以展示刷新按钮 -->
<!-- data-classes: 追加表格类命, 默认为 table table-bordered table-hover -->
<!-- data-height(不推荐设置): 设置表格默认高度, 当内容超出设定高度时,表格将显示垂直滚动条 -->
<!-- data-side-pagination(client/server): 设置数据分页方式, 推荐服务端(server)分页做远程请求接口数据渲染 -->
<!-- data-url: 服务端请求的远程数据拉取接口地址 -->
<!-- data-ajax(推荐设置, 但不强求): 针对 ajax 的回调配置, 内部会通过回调 $.ajax 对象给全局同名函数, 方便提供给开发者 hook 处理 -->
<!-- data-ajax-options(推荐设置, 但不强求): 调用服务端 ajax 请求的 $.ajax 配置 -->
<!-- data-method: 如果没有配置 data-ajax, 默认会直接 $.ajax 调用服务端接口, 该配置影响默认请求方法(get/post) -->
<!-- data-pagination: 采用分页处理, 后台有些统计数据功能可能不需要分页, 这时候可以置为 false -->
<!-- data-data-type: 服务端响应的数据类型, 推荐采用 JSON 数据返回 -->
<!-- data-data-field: 服务端响应的数据内容字段, 默认服务端返回的JSON格式必须为 { rows: [...] } 从中提取数据 -->
<!-- data-total-field: 服务端相应的数据总行数, 服务端必须传回, 默认为 total -->
<!-- data-page-list: 可选的分页功能单页数量, 也就是 limit 0,{偏移值}, 也就是提交该列表当中的数值 -->
<!-- data-query-params: 分页查询的发起查询条件回调函数, 发起查询的时候会调用该全局函数然后拼接查询条件 -->
<table id="table"
       data-toggle="table"
       data-show-columns="true"
       data-show-refresh="true"
       data-classes="table table-bordered table-hover text-center"
       data-height="460"
       data-side-pagination="server"
       data-url="https://data.meteorcat.me/data1.json"
       data-ajax="ajaxRequest"
       data-ajax-options="ajaxOptions"
       data-method="post"
       data-page-list="[5, 10, 20, 50, 100, 200]"
       data-pagination="true"
       data-data-type="json"
       data-data-field="rows"
       data-total-field="total"
       data-query-params="ajaxQueryParams"
>
    <thead>
    <tr>
        <!-- data-field: 对应数据列表之中的字段为 rows[].id 的数据展示 -->
        <!-- data-sortable: 启用按字段排序功能 -->
        <!-- data-sort-name: 如果设置该配置, 则排序的字段提交为该值 -->
        <!-- data-formatter: 设置回调函数名, 用于对字段做再处理 -->
        <th data-field="id"
            data-sortable="true"
            data-sort-name="uid"
            data-formatter="uidFormatter"
        >
            ID
        </th>
        <th data-field="name">
            Item Name
        </th>
        <th data-field="price">
            Item Price
        </th>
    </tr>
    </thead>
</table>
<script>
    /**
     * 服务端拉取数据接口的 ajax 配置
     * @param params
     */
    window.ajaxRequest = params => {
        const url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data'

        $.get(`${url}?${$.param(params.data)}`).then(function (res) {
            params.success(res)
        })
    }


    /**
     * 服务端拉取数据接口的 ajax 内部设置
     */
    window.ajaxOptions = {
        beforeSend(xhr) {
            // 设置自定义的 header 头信息等处理
            xhr.setRequestHeader('custom-auth-token', 'custom-auth-token')
        }
    }

    /**
     * 查询条件回调处理
     * @param params
     */
    window.ajaxQueryParams = params => {
        // 添加查询条件 uid = 10001
        params.uid = 10001;
        return params;
    }

    /**
     * 字段格式化器
     */
    window.uidFormatter = function (value, row) {
        return `<span style="color:green">${value}</span>`
    }
</script>

默认采用数据库直接 page-offset[(limit 0, 5) 查询方式, 不用换算页码], 具体分页数据参考 JSON 模板

lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "total": 800,
  // totalNotFiltered 该字段是做涵盖数据过滤的总数据条数, 这个字段可以不用传递
  "totalNotFiltered": 800,
  "rows": [
    {
      "id": 10,
      "name": "Item 10",
      "price": "$10"
    },
    {
      "id": 11,
      "name": "Item 11",
      "price": "$11"
    }
  ]
}

响应数据比较重要的是 row(数据列表) 和 total(数据条数), 之后就是调用事件功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * 销毁并重绘表格 - 用于对 bootstrap-table 做完全节点重建
 */
function Created() {
    // 销毁旧实例, 重新初始化
    $('#table').bootstrapTable('destroy');
    $('#table').bootstrapTable();
}

/**
 * 刷新分页请求 - 对当前的 bootstrap-table 查询条件做重新请求
 */
function Refresh() {
    $('#table').bootstrapTable('refresh');
}

/**
 * 对表格示例做重建配置
 */
function Config(options = {}) {
    $('#table').bootstrapTable('refreshOptions', options);
}

表格初始化差不多是这样就行了, 这就是基本使用方法

注意: 设置定义的回调函数位置必须在 BootstrapTable 初始化之前, 否则可能无法获取到全局 window.* 方法