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、最终显示