<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
<link href="//unpkg.com/layui@2.9.21-rc.3/dist/css/layui.css" rel="stylesheet">
<style>
.news-list li{margin-top: 15px;}
.news-list li span{margin-left: 10px; float: right;}
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-tab layui-tab-card" lay-filter="demo-tab">
<ul class="layui-tab-title">
<li class="layui-this">全部({$listCount1})</li>
<li>已回复({$listCount2})</li>
<li>未回复({$listCount3})</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show layui-padding-3">
<div class="news-list" id="list1">
<ul>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
</ul>
</div>
<div id="page1"></div>
</div>
<div class="layui-tab-item layui-padding-2">
<div class="news-list" id="list2">
<ul>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
</ul>
</div>
<div id="page2"></div>
</div>
<div class="layui-tab-item layui-padding-2">
<div class="news-list" id="list3">
<ul>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
<li><a href="?id=1" target="_blank">老人的社保如何缴纳?</a><span>2024-12-05</span></li>
</ul>
</div>
<div id="page3"></div>
</div>
</div>
</div>
</div>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.21-rc.3/dist/layui.js"></script>
<script>
layui.use(function () {
const laypage = layui.laypage;
const $ = layui.$;
// 通用分页渲染函数
function renderPagination(elemId, category, listId, count) {
laypage.render({
elem: elemId,
count: count, // 总数据量
curr: 1, // 当前页
limit: 2, // 每页显示数量
theme: '#1E9FFF',
jump: function (obj, first) {
console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
// 首次加载时自动请求第一页的数据
if (!first) {
$.get('http://localhost/index/demo/getData/', {
"page": obj.curr,
"category": category,
"rnd": new Date().getTime()
}, (res) => {
let strHtml = '';
// 遍历返回的数据生成 HTML
for (let i = 0; i < res.data.length; i++) {
strHtml += `<li><a href="?id=${res.data[i].id}">${res.data[i].title}</a><span>${res.data[i].created_at}</span></li>`;
}
// 更新对应列表
$(`#${listId} ul`).html(strHtml);
}, 'json');
} else {
// 如果是首次加载，则加载第一页的数据
$.get('http://localhost/index/demo/getData/', {
"page": 1,
"category": category,
"rnd": new Date().getTime()
}, (res) => {
let strHtml = '';
for (let i = 0; i < res.data.length; i++) {
strHtml += `<li><a href="?id=${res.data[i].id}">${res.data[i].title}</a><span>${res.data[i].created_at}</span></li>`;
}
$(`#${listId} ul`).html(strHtml);
}, 'json');
}
}
});
}
// 调用封装的分页渲染函数，分别为不同的分类
renderPagination('page1', 1, 'list1', {$listCount1});
renderPagination('page2', 2, 'list2', {$listCount2});
renderPagination('page3', 3, 'list3', {$listCount3});
});
</script>
</body>
</html>backend code:
/**
* 显示资源列表
*
* @return View
*/
public function index():View
{
$listCount1 = Db::name('news')->where('category',1)->count();
$listCount2 = Db::name('news')->where('category',2)->count();
$listCount3 = Db::name('news')->where('category',3)->count();
return view('/list',['listCount1'=>$listCount1,'listCount2'=>$listCount2,'listCount3'=>$listCount3]);
}
/**
* 显示创建资源表单页.
*
* @return Json
* @throws DataNotFoundException
* @throws DbException
* @throws ModelNotFoundException
*/
public function getData():Json
{
$category = input('get.category/d');
$page = input('get.page/d');
$offset = ($page - 1) * 2;
$count = Db::name('news')->where('category',$category)->count();
$data = Db::name('news')->where('category',$category)->limit($offset,2)->select();
// dd($data);
return json(['code' => 200, 'msg' => 'success', 'count' => $count, 'data' => $data]);
}the end.