layui 表格

用layui生成表格包括分页 按钮

前段js代码

layui.use(['element','table'], function(){//所有代码要放到layui.use下面，

var table = layui.table;
var $ = layui.jquery;
		//表格生成
        table.render({
            elem: '#gongaozhanshi'
            ,url:'/qiyewx/message/gonggaozhanshi/'
            ,cols: [[
                {type:'numbers'}
                // ,{field:'id', width:80, title: '序号', sort: true}
                ,{field:'title', width:150, title: '标题'}
                ,{field:'created_at', width:150, title: '消息时间', sort: true}
                ,{field:'content', width:1000, title: '公告内容'}
                ,{field:'receiver_department', width:180, title: '接收人'}
                ,{field:'is_read', width:85, title: '详情',templet:function (b) {
                    if (b.is_read == 1){
                        return "<span class='layui-badge layui-bg-green'>已读</span>";
                    }else{
                        return "<button name='id'  value="+b.id+" class='layui-badge gg gg"+b.id+" '><span>未读</span></button>" +
                            "<span class='layui-badge layui-bg-green ggyd"+b.id+"' style='display: none'>已读</span>";
                    }
                    }}
            ]]
            ,page: true
        });

//ajax点击事件
        $(document).on('click',".gg",function () {
            var id = this.value;
            $.ajax({
                type: "get",
                url: "/qiyewx/message/changestatusgg?id="+id,
                dataType: "json",
                success: function (res) {
                    if (res === true){
                        $("."+"gg"+id).hide();
                        $("."+"ggyd"+id).show();
                    }else{

                    }
                }
            });
        })

后端主要是 注意返回的数据格式

    public function gonggaozhanshi(){
        $data = input('param.');
        $userid = session('user.id');

        $department_list = WorkuserService::getcrmDepartment();
        $sql = "SELECT * FROM work_message_announcement INNER JOIN work_message_announcement_rel ON work_message_announcement_rel.announcement_id = work_message_announcement.id WHERE username=".$userid." ORDER BY work_message_announcement.id desc";
        $all_mes_re = Db::query($sql);
        foreach ($all_mes_re as $key => $val){
            $department = explode(',',$val['receiver']);
            foreach ($department as $k => $v){
                if(empty($all_mes_re[$key]['receiver_department'])){
                    $all_mes_re[$key]['receiver_department'] = $department_list[$v];
                }else{
                    $all_mes_re[$key]['receiver_department'] = $all_mes_re[$key]['receiver_department'].','.$department_list[$v];
                }
            }
        }
        $start=($data['page']-1)*$data['limit']; #计算每次分页的开始位置
        $pagedata=array_slice($all_mes_re,$start,$data['limit']);#用array_slice来进行数组分页
        $data = [
            'code'=>'0',
            'msg'=>'',
            'count'=>count($all_mes_re),
            'data'=>$pagedata
        ];
        return $data;

    }```