Collection
Collection
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</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>
<div class="jumbotron">
<div id="data-area">
<ul> <!--这里添加分页数据--> </ul>
</div>
<div id="pageBar"><!--这里添加分页按钮栏--></div>
</body>
<!--<script type="text/javascript" src="__STATIC__/index/jquery-3.2.1.min.js"></script>-->
<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);
});
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
