• Layui数据表格table排序（后端PHP）

    一、需要添加

    • 1、需要排序的字段加上 sort: true 属性
    • 2、table.on('sort(lay-filter的值)', function(obj) { 监听排序点击操作
    • 3、php接收参数：sort_field，sort_order 实现排序
    • 4、实际使用中把数据获取方式 data 写死的，改为 url 接口动态获取
    • 5、效果图如下：
      在这里插入图片描述

    二、html代码

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" v="2.5.6" e="layui"/>
</head>

<body>
    <table id="demo" lay-filter="test"></table>
    <script type="text/html" id="statusTemplet">
        {{# if(d.status == 1) { }}
        <button class="layui-btn layui-btn-xs">已通过</button>
        {{# } else if (d.status == 2) { }}
        <button class="layui-btn layui-btn-danger layui-btn-xs">已驳回</button>
        {{# } else { }}
        <button class="layui-btn layui-btn-primary layui-btn-xs">待审核</button>
        {{# } }}
    </script>
</body>
<script src="https://www.layuicdn.com/layui/layui.js" v="2.5.6" e="layui.all"></script>
<!--您的Layui代码start-->
<script type="text/javascript">
        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element; //元素操作 等等...

        /*layer弹出一个示例*/
        // layer.msg('Hello World');

        //数据表格实例
        let userTable = table.render({
            elem: '#demo'
            // ,width: 312
            // ,url: '/static/json/table/user.json' //数据接口
            ,data: getData()
            ,cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, fixed: 'left', width: 100}
                ,{field: 'username', title: '用户名'}
                ,{field: 'status', title: '状态', align: 'center', templet: '#statusTemplet'}
                ,{field: 'sex', title: '性别', sort: true}
                ,{field: 'experience', title: '积分', sort: true}
                ,{field: 'score', title: '评分', sort: true}
            ]]
            ,page: true //开启分页
            ,limit: 6 //默认每页记录数
            ,limits: [3,6,9] //可选每页记录数
        });

        table.on('sort(test)', function(obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            // console.log(obj.field); //当前排序的字段名
            // console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            // console.log(this); //当前排序的 th 对象

            let sort_field = obj.field; //字段名
            let sort_order = obj.type; //排序顺序，可能的值：asc desc null

            let sortWhere = {sort_field, sort_order};

            // console.log(sortWhere); //Object { sort_field: "id", sort_order: "asc" }

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            userTable.reload({
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                ,where: sortWhere
            });

            layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
        });

        function getData() {
            let data = [
                {"id":10000,"username":"user-0","sex":"女","experience":255,"logins":24,"score":57,status:0},
                {"id":10001,"username":"user-1","sex":"男","experience":884,"logins":58,"score":70.5,status:0},
                {"id":10002,"username":"user-2","sex":"女","experience":650,"logins":77,"score":31,status:1},
                {"id":10003,"username":"user-3","sex":"女","experience":362,"logins":157,"score":68,status:0},
                {"id":10004,"username":"user-4","sex":"男","experience":807,"logins":51,"score":6,status:2},
                {"id":10005,"username":"user-5","sex":"女","experience":173,"logins":68,"score":87,status:0},
                {"id":10006,"username":"user-6","sex":"女","experience":982,"logins":37,"score":34,status:2},
                {"id":10007,"username":"user-7","sex":"男","experience":727,"logins":150,"score":28,status:1},
                {"id":10008,"username":"user-8","sex":"男","experience":951,"logins":133,"score":14,status:0},
                {"id":10009,"username":"user-9","sex":"女","experience":484,"logins":25,"score":75,status:0}
            ];

            return data;
        }
    });
</script>
</html>


    • 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

    三、PHP部分代码

        /**
     * 返回用户列表数据：list是关键字，方法名只能用lists或者其他的了
     * @param array $param 查询参数：如 ['sort_field' => 'id', 'sort_order' => 'desc', '']
     * @param array $pager 分页格式如：['page' => 1, 'page_size' => 10]
     * @return array
     */
    public function lists($param, $pager)
    {
        $sorts = []; //默认 ['id' => 'desc']
        $hasData = self::getWhere($param, $sorts);
        if (!$hasData) {
            return ['list' => [], 'count' => 0];
        }

        $userDao = new UserDao();
        $data = $userDao->pager($param, '*', $pager, $sorts);
        if ($data['list']) {

        }
        return $data;
    }

    /**
     * 参数处理
     * @param array $param 参数
     * @param array $sorts 排序
     * @return bool 查询的数据是否存在
     */
    public function getWhere(&$param, &$sorts)
    {
        $hasData = true;
        $sortField = !empty($param['sort_field']) ? $param['sort_field'] : '';
        $sortOrder = !empty($param['sort_order']) ? $param['sort_order'] : '';
        if ($sortField && $sortOrder) { //sort_order可能为null，所以要判断这2个都不为空
            $sorts = [$sortField => $sortOrder];
        }
        unset($param['sort_field'], $param['sort_order']); //不管存不存在，unset这2个参数

        return $hasData;
    }

    • 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

    四、其他

  • 相关阅读:
    [ElasticSearch]-初识Elastic Stack
    一个Tensor在深度学习框架中的执行过程
    MFC Windows 程序设计[222]之对话框工具状态栏(附源码)
    Java面向对象回顾
    CKA考题[k8s1.24]
    Cesium案例（八） Terrain
    大语言模型LLM知多少？
    IOS开发--UILabel的基本使用
    [Python] Python编程技巧总结[不断更新....]
    使用 C# 创造 ASCII 艺术
  • 原文地址：https://blog.csdn.net/qq_36025814/article/details/125584337