LeCMS
ClassCMS
Fastadmin
iCMS
PbootCMS
PHPCMS
易优CMS
YzmCMS
讯睿CMS
极致CMS
Wordpress
HkCMS
YznCMS
WellCMS
ThinkCMF
帝国CMS
SIYUCMS在 ThinkPHP 中使用 Ajax 实现无刷新分页，可以结合 ThinkPHP 的分页功能和前端的 Ajax 请求来实现。以下是实现步骤：
1. 后端：ThinkPHP 分页数据准备
在控制器中，使用 ThinkPHP 的分页功能获取分页数据，并将数据返回给前端。
namespace app\index\controller;use think\Controller;use think\Db;use think\Request;class Index extends Controller{
public function index()
{
// 获取当前页码，默认为 1
$page = input('page', 1);
$pageSize = 10; // 每页显示的数据量
// 查询数据总数
$total = Db::name('your_table')->count();
// 查询分页数据
$list = Db::name('your_table')
->limit(($page - 1) * $pageSize, $pageSize)
->select();
// 返回数据
return json([
'list' => $list,
'total' => $total,
'page' => $page,
'pageSize' => $pageSize,
]);
}}2. 前端：HTML 结构和分页按钮
在前端页面中，创建一个容器用于显示数据，并添加分页按钮。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Ajax 分页</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body>
<div id="data-container">
<!-- 数据将动态加载到这里 -->
</div>
<div id="pagination">
<!-- 分页按钮 -->
<button id="prev-page">上一页</button>
<span id="current-page">1</span>
<button id="next-page">下一页</button>
</div>
<script>
$(document).ready(function () {
let currentPage = 1;
// 加载数据
function loadData(page) {
$.ajax({
url: '/index/index', // 后端接口地址
type: 'GET',
data: { page: page },
success: function (response) {
if (response.list && response.list.length > 0) {
// 清空容器
$('#data-container').empty();
// 渲染数据
response.list.forEach(function (item) {
$('#data-container').append(`<div>${item.title}</div>`);
});
// 更新当前页码
currentPage = response.page;
$('#current-page').text(currentPage);
} else {
alert('没有更多数据了！');
}
},
error: function () {
alert('加载数据失败！');
}
});
}
// 初始化加载第一页数据
loadData(currentPage);
// 上一页按钮点击事件
$('#prev-page').click(function () {
if (currentPage > 1) {
loadData(currentPage - 1);
}
});
// 下一页按钮点击事件
$('#next-page').click(function () {
loadData(currentPage + 1);
});
}); </script></body></html>3. 后端：处理分页请求
确保后端控制器能够正确处理分页请求，并返回 JSON 格式的数据。前端通过 Ajax 请求获取数据后，动态更新页面内容。
4. 分页样式优化
如果需要更美观的分页效果，可以使用 Bootstrap 或其他前端框架的分页组件。例如：
<nav aria-label="Page navigation"> <ul class="pagination"> <li id="prev-page"><a href="javascript:void(0);">上一页</a></li> <li><a href="javascript:void(0);" id="current-page">1</a></li> <li id="next-page"><a href="javascript:void(0);">下一页</a></li> </ul></nav>
5. 完整流程
前端：用户点击分页按钮时，通过 Ajax 请求后端数据。
后端：根据请求的页码，查询数据库并返回分页数据。
前端：接收数据后，动态更新页面内容，实现无刷新分页。
6. 注意事项
分页逻辑：确保后端分页逻辑正确，避免超出数据范围。
性能优化：如果数据量较大，可以考虑使用缓存或优化查询语句。
用户体验：在加载数据时，可以添加加载动画，提升用户体验。
通过以上步骤，你可以在 ThinkPHP 中轻松实现无刷新分页功能。
希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， LeCMS， ClassCMS， Fastadmin， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。
未经允许不得转载：Str Tom工作室 » 在Thinkphp中使用ajax实现无刷新分页的方法
