layui数据表格:thinkphp5.1返回接口实例

1、layui数据表格展示(方法渲染)
在这里插入图片描述
具体例子:
在这里插入图片描述

代码如下:
layui.use(['table','form'], function(){
  var table = layui.table;
  var form = layui.form;
  var $ = layui.$;
  
  //第一个实例
  var tablein = table.render({
    elem: '#user'
    ,id: 'idTest'
    ,height:600
    ,url: '{:url("user/getUserData")}' //数据接口
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名'}
      ,{field: 'email', title: '用户邮箱'}
      ,{field: 'score', title: '学分', sort: true}
      ,{field: 'status', title: '状态',templet:function(d){
           if(d.status == 1){
           	   return '<span style="color:green">正常</span>'
           }else{
           	   return '<span style="color:red">禁用</span>'
           }
      }}
      ,{field: 'isadmin', title: '是否管理员',templet:function(d){
      	  return '<span>学员</span>'
      }}
      ,{field: 'create_time', title: '加入时间'}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
    ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
      layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
      ,curr: 1 //设定初始在第 5 页
      ,groups: 5 //只显示 1 个连续页码
      ,first: false //不显示首页
      ,last: false //不显示尾页
    }
  });

2、异步数据接口返回的数据格式
在这里插入图片描述
这是layui官方的数据格式,其实没有要求的话,完全可以在后端返回相同格式;
如果不想返回这样的格式,那么可以使用以下方式:
在这里插入图片描述
具体实例:
thinkphp5.1 中控制器的写法
在这里插入图片描述

代码:
 /**
     * 前台获取数据的接口
     * @return [type] [description]
     */
	public function getUserData(){

		$page = request()->param('page');

		$limit = request()->param('limit');

		$start=$limit*($page-1);


            $data = UserModel::where('isadmin',0)->limit($start,$limit)->order('create_time','desc')->select();
            $count = count(UserModel::where('isadmin',0)->select());

        $msg = [
        	 'code' => 0,
        	 'msg' => '查询成功',
             'data'=> $data,
             'count' => $count
        ];
        echo json_encode($msg);die;
	}

3、最终显示
在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值