Thinkphp6学习（13）+layui分页查询显示
====前端代码====
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layui数据表格接口</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<style>
body {
padding-top: 50px;
}
h2 {
text-align: center;
margin-bottom: 30px;
}
#box {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>layui数据表格 使用</h2>
<div id="box">
<table id="demo" lay-filter="test"></table>
</div>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,url: '{:url("index.php/dbtest/laylist")}' //数据接口
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,limit:10 //一页显示多少条
,limits:[10,20]//每页条数的选择项
,groups: 2 //只显示 2 个连续页码
,first: "首页" //不显示首页
,last: "尾页" //不显示尾页
}
,cols: [[ //表头
{field: 'id', title:'ID'}
,{field: 's_clas', title: '班级'}
,{field: 's_numb', title: '学号'}
,{field: 's_name', title: '姓名'}
,{field: 's_chin', title: '语文'}
,{field: 's_math', title: '数学'}
,{field: 's_engl', title: '英语'}
,{field: 's_poli', title: '政治'}
,{field: 's_hist', title: '历史'}
,{field: 's_phys', title: '物理'}
,{field: 's_chem', title: '化学'}
,{field: 's_spor', title: '体育'}
,{field: 's_tota', title: '总分'}
,{field: 's_bjmc', title: '班名次'}
,{field: 's_jmc', title: '级名次'}
,{field: 's_town', title: '镇名次'}
,{field: 's_near', title: '上次名次'}
,{field: 's_prog', title: '进步'}
]]
});
});
</script>
</body>
</html>
====后端代码====
public function layview()
{
return View::fetch();
}
public function laylist()
{
$count = Db::table('btp6_mark') -> count();
//$count=count($data);
//获取每页显示的条数
$limit= Request::param('limit');
//获取当前页数
$page= Request::param('page');
// 查询出当前页数显示的数据
$list = Db::table('btp6_mark')->page($page,$limit)->select();
return json(['code' => 0, 'count' => $count, 'data' => $list]);
}
====效果图====
腾讯云开发者
