tp5+ajax+jq实现无刷新分页

<!DOCTYPE html>

</head>
<style>

#pageBar {
text-align: right;
padding: 0 20px 20px 0;
}

.pageBtn a {
display: inline-block;
border: 1px solid #aaa;
padding: 2px 5px;
margin: 0 3px;
font-size: 13px;
background: #ECECEC;
color: black;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
}

.pageBtn-selected a {
display: inline-block;
border: 1px solid #aaa;
padding: 2px 5px;
margin: 0 3px;
font-size: 13px;
background: #187BBD;
color: white;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
}

.pageBtn a:hover {
background: #187BBD;
color: white;
}

</style>
<body>

</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js";></script>
<script src="__STATIC__/index/js/ajaxPage.js"></script>
</html>

php代码

<?php

namespace appindexcontroller;
use thinkController;
class Index extends Controller
{

/**
* @return mixed
* 主页
*/
public function index()
{
return $this->fetch();

}

/**
* @throws \think\db\exception\DataNotFoundException
* @throws \think\db\exception\ModelNotFoundException
* @throws \think\exception\DbException
* 分页数据处理查询
* :ajax查询返回数据
*/
public function getPage(){
if(request()->isAjax()){

//1.获取数据（curPage）
$page=input('get.');
$curPage = $page['curPage'];

//2.定义分页所需的数据
$totalItem = '10'; //总记录数(自行定义)
$pageSize='4'; //每一页记录数(自行定义)
$totalPage =ceil($totalItem/$pageSize); //总页数
$startItem = ($curPage-1) * $pageSize;//根据页码来决定查询数据的节点

//3.查询数据
$res=db('content')
->limit($startItem,$pageSize)
->select();

//4.放入所有数据
$arr['totalItem']=$totalItem;
$arr['pageSize']=$pageSize;
$arr['totalPage']=$totalPage;
foreach($res as $lab) {
$arr['data_content'][] = $lab;
}

//5.结果返回（此处没有判定是否查询成功）
$this->result($arr,'1','成功','json');

}
}

}

ajaxPage.js代码

var curPage; //当前页数

var totalItem; //总记录数
var pageSize; //每一页记录数
var totalPage; //总页数

// curPage = getUrlParam('page')

/**

获取url里面的参数(name)!!!!个人私藏
*

**/
/* function getUrlParam(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数

if (r != null)
return unescape(r[2]);
return null; //返回参数值

}*/

//获取分页数据
function turnPage(page) {

$.ajax({
type: 'get',
url: 'getPage', //这里是请求的后台地址，自己定义
data: {'curPage': page},
dataType: 'json',
beforeSend: function () {
$("#data-area ul").append("加载中...");
},
success: function (data) {

$("#data-area ul").empty(); //移除原来的分页数据
totalItem = data.data.totalItem; // 返回的总记录数
pageSize = data.data.pageSize; //返回的每一页记录数
curPage = page; //返回的当前页码
totalPage = data.data.totalPage; //返回的总页数

console.log("totalItem:"+totalItem);
console.log("pageSize:"+pageSize);
console.log("curPage:"+curPage);
console.log("totalPage:"+totalPage);

var data_content = data.data.data_content; //返回的数据内容
console.log(data_content);
var data_html = ""; //数据输出的html代码

//添加新的分页数据（数据的显示样式根据自己页面来设置，这里只是一个简单的列表）
$.each(data_content, function (index, array) {
data_html += "<li>" + array['id'] + " " + array['title'] + " " + array['article'] + " " + array['time'] + "</li>";
}); //遍历数据，形成html代码

$("#data-area ul").append(data_html); //输出html代码
getPageBar();
},
/* complete: function() { //添加分页按钮栏
getPageBar();
},*/
error: function () {
alert("数据加载失败");
}
});

}
/* curPage; //当前页数

totalItem; //总记录数
pageSize; //每一页记录数
totalPage; //总页数
*/

//获取分页条（分页按钮栏的规则和样式根据自己的需要来设置）
function getPageBar() {

//防止数据错误时候出现当前页数大于总页数
if (curPage > totalPage) {
curPage = totalPage;
}
//防止数据错误时候出现当前页数小于第一页
if (curPage < 1) {
curPage = 1;
}
//定义分页按钮html代码
pageBar = "";

//如果不是第一页
if (curPage != 1) {
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(1)'>首页</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(curPage-1)+")'>上一页</a></span>";
}

//显示的页码按钮(5个)

//定义start 和end两个变量准备循环输出可见的分页按钮
var start, end;
if (totalPage <= 5) {
start = 1;
end = totalPage;
} else {
//当前页码与总页数相差1个的时候，要显示之前的页码
if (totalPage - curPage < 2) {
start = totalPage - 4;
end = totalPage;
} else {
//显示前面两个和后面两个
start = curPage - 2;
end = curPage + 2;
}
}
//循环输出分页按钮
for (var i = start; i <= end; i++) {

if (i == curPage) {
pageBar += "<span class='pageBtn-selected'><a href='javascript:turnPage(" + i + ")'>" + i + "</a></span>";
} else {
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + i + ")'>" + i + "</a></span>";
}
}

//如果不是最后页,显示输出“下一页，末页”

if (curPage != totalPage) {
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + (parseInt(curPage) + 1) + ")'>下一页</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + totalPage + ")'>末页</a></span>";
}
//匹配改变pageBar里面的内容
$("#pageBar").html(pageBar);

}

//页面加载时初始化分页
$(function () {

turnPage(1);

});

相关文章