layui_数据表格console.log(obj.field); // 当前排序的字段名 console.log(ob

<!DOCTYPE html>
<html lang="en">

<!-- layui最新文档链接：https://layui.dev/docs/2/table/#options.height -->
<!-- 实现导航栏搜索，数据表格展示 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
    <!-- 数据表格 -->
    <table id="demo" lay-filter="ccb_filter"></table>
</body>

<script src="./layui/layui.js"></script>
<script>
    layui.use(function () {
        var table = layui.table;
        $ = layui.$

        table.render({
            elem: '#demo',
            url: 'http://localhost:8585/layui/getTableData',
            cols: [[
                { type: 'radio', fixed: true },
                { field: 'id', title: 'ID', width: 350, sort: true, fixed: 'left' },
                { field: 'username', title: '用户名', sort: true, width: 350 },
                { field: 'sex', title: '性别', width: 350, sort: true },
                { field: 'address', title: '地址', width: 350, sort: true },
                { title: '操作', fixed: 'right', align: 'center', toolbar: '#rowbar' }
            ]],
            toolbar: '#menubar',
            defaultToolbar: ['filter'], // 顶部工具栏右上角图标
            autoSort: false,
            page: true,  // 开启分页
            limit: 2,
            limits: [1, 2, 3, 5],
            page: {
                first: '首页',
                last: '尾页',
                prev: '上一页',
                next: '下一页',
                groups: 5, // 连续出现的页码数量
                layout: ['prev', 'page', 'next', 'limit', 'count'] // 定义分页栏按钮排列顺序
            }
        });

        // 监听头部工具栏
        table.on('toolbar(ccb_filter)', function (obj) {
            var layEvent = obj.event;
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data; // 当前行数据

            if (layEvent === 'add') {
                console.log(data[0].username)
            } else if (layEvent === 'edit') {
                console.log(data[0].username)
            } else if (layEvent === 'del') {
                console.log(data[0].username)
            }
        });

        // 监听右侧工具栏
        table.on('tool(ccb_filter)', function (obj) {
            var layEvent = obj.event;
            var data = obj.data;   // 当前行数据
            if (layEvent === 'detail') {
                alert(data.username)
            } else if (layEvent === 'log') {
                alert(data.sex)
            }
        });

        // 表格重载
        table.on('sort(ccb_filter)', function (obj) {
            console.log(obj.field); // 当前排序的字段名
            console.log(obj.type);  // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）

            table.reload('demo', {   // 传表格id
                initSort: obj,
                where: {
                    field: obj.field,
                    order: obj.type
                }
            });
        })

    });
</script>

<!-- 头部工具栏 -->
<script type="text/html" id="menubar">
    <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    <button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
</script>

<!-- 右侧工具栏 -->
<script type="text/html" id="rowbar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看明细</a>
    <a class="layui-btn layui-btn-xs" lay-event="log">操作日志</a>
</script>

</html>