demo效果
注意事项：请求的JSON字段的顺序要和表头field 名字 顺序都要对应 否则加载数据失败
相关文章
layui的table中显示图片方法
layui table表格带图片，图片显示不全问题
如果要修改tabel的样式 直接添加到style 就行eg:
/*隐藏table分页点击跳转按钮*/ .layui-laypage-skip button{ display: none; }
// console.log(table.checkStatus('test').data); // 获取表格中选中行的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>
<body>
<div class="demoTable">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="test"></table>
<script src="https://www.layuicdn.com/layui/layui.js"></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 //表格
table.render({
elem: '#test'
,url:'a.php'
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,groups: 1 //只显示 1 个连续页码
,first: false //不显示首页
,last: false //不显示尾页
}
,cols: [[
{field:'id', 100, title: 'ID', sort: true}
,{field:'username', 100, title: '用户名',sort: true}
]]
// 响应的数据
,parseData: function(res){ //res 即为原始返回的数据
return {
"code": res.code, //解析接口状态
"count": res.count, //解析接口总数
"data": res.data //解析数据列表
};
}
//请求的参数
,request: {
pageName: 'page' //页码的参数名称，默认：page
,limitName: 'limit' //每页数据量的参数名，默认：limit
}
,done: function () {
// $('.layui-table .layui-table-cell > span').css({'font-weight': 'bold'});//表头字体样式
/*$('th').css({'background-color': '#5792c6', 'color': '#fff','font-weight':'bold'}) 表头的样式 */
// $('th').hide();//表头隐藏的样式
// $('.layui-table-page').css('margin-top','40px');//页码部分的高度调整
}
});
// 数据重载
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//执行重载
table.reload('test', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
id: demoReload.val()
}
}, 'data');
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
<?php
// 搜索
if(isset($_REQUEST['id']) && !empty($_REQUEST['id'])){
$result = [
'code'=>0,
'count'=>100,
'data'=>[
[
'id'=>1,
'username'=>111,
],
[
'id'=>1,
'username'=>111,
],
]
];
}else{
$result = [
'code'=>0,
'count'=>100,
'data'=>[
[
'id'=>1,
'username'=>111,
],
[
'id'=>2,
'username'=>222,
],
[
'id'=>3,
'username'=>333,
],
]
];
}
echo json_encode($result,JSON_UNESCAPED_UNICODE); //JSON_UNESCAPED_UNICODE防止中文乱码