1.准备工作
（1）引入
jQuery和
分页插件
在HTML文件中引入
jQuery和
分页插件（如
jquery.pagination.js）的js文件。
（2）创建
分页容器
在HTML文件中创建一个容器，用于显示
分页导航条和数据内容。
（3）获取数据
使用ajax请求获取需要
分页的数据，并将数据渲染到容器中。
2.初始化
分页插件
使用
jQuery的pagination()方法初始化
分页插件，设置相关参数，如总页数、每页显示的数据数量、当前页码等。
3.绑定事件
为
分页导航条中的页码绑定点击事件，当点击时修改当前页码，并重新获取数据进行渲染。
示例代码：
HTML文件：
```
<div id="data-container"></div>
<div id="pagination"></div>
```
JS文件：
```
var pageSize = 10; //每页显示的数据数量
var currentPage = 1; //当前页码
getData(currentPage);
//获取数据并渲染到页面
function getData(page) {
$.ajax({
url: 'data.php',
type: 'get',
data: {
page: page,
pageSize: pageSize
},
success: function(res) {
//将数据渲染到页面
renderData(res.list);
//初始化
分页插件
$("#pagination").pagination({
currentPage: page, //当前页码
totalPage: res.totalPage, //总页数
isShow: true, //是否显示
分页导航条
count: 5, //
分页导航条中显示的页码数量
homePageText: "首页",
endPageText: "尾页",
prevPageText: "上一页",
nextPageText: "下一页",
callback: function(current) { //点击
分页导航条中的页码触发的函数
currentPage = current; //修改当前页码
getData(currentPage); //重新获取数据进行渲染
}
});
}
});
}
//将数据渲染到页面
function renderData(list) {
var html = "";
for (var i = 0; i < list.length; i++) {
html += "<div>" + list[i].title + "</div>";
}
$("#data-container").html(html);
}
```
PHP文件（data.php）：
```
$page = $_GET['page']; //当前页码
$pageSize = $_GET['pageSize']; //每页显示的数据数量
//查询数据总条数
$totalCount = mysqli_num_rows(mysqli_query($conn, "select * from table_name"));
//计算总页数
$totalPage = ceil($totalCount / $pageSize);
//查询当前页码需要显示的数据
$start = ($page - 1) * $pageSize;
$sql = "select * from table_name limit $start, $pageSize";
$result = mysqli_query($conn, $sql);
$list = array();
while ($row = mysqli_fetch_assoc($result)) {
$list[] = $row;
}
//返回数据
$res = array(
'totalPage' => $totalPage,
'list' => $list
);
echo json_encode($res);
```
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
