🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起学习和进步!😄
🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注
前言
对于数据分页
这种功能,是每一个开发人员必须去掌握的技能, 分页能够优化数据,也能够更好的展示数据!
如果我们不使用分页,比如你查询出来的数据列表有千万条数据,那么用户体验是绝对不好的,用户也不可能全部都看,毕竟不是所有数据都是用户所需要的, 所以要把数据进行分页显示,让用户想看哪一页就点击看哪一页,这样也提高了用户查看的效率!
今天我们就来讨论一下使用php
如何进行字符串内容的分页!
分页类型
这里我把分页分为几个版本,从简入深的来梳理一下分页的整体流程!
一般来说我们数据分页
最简单的样式都是分为三种:
数字分页
文字+数字组合分页+省略号
分页模块封装类
分页原理
分页
的核心原理,其实就是拆分提取的思想
例如一个字符串,你可以拆分开来,然后从字符串的某个位置到某个位置进行提取!
如果是MySQL
数据库,那么则是limit
限制提取
例如: limit 0,10 表示 从第0+1 条开始 显示10条数据
当前页=1 //说明是第一页 表示1到10条数据 limit 表示就是 limit 0,10
当前页=2 //说明是第二页 表示11到20条数据 limit 表示就是 limit 10,10
当前页=3 //说明是第三页 表示21到30条数据 limit 表示就是 limit 20,10
我们根据这个原理,也可以直接用一个mb_substr函数
来模拟limit
拆分提取字符串的形式,来进行分页处理!
数字分页
在写代码之前,最好建议大家先捋一捋思维逻辑,这样有便于后期写代码!
我们来看看数字分页
的大致逻辑!
举个栗子
首先我们拿到的是一堆字符串文字
这里我就假设随便定义一堆字符串文字内容!
如下
$str="微服务架构是“新常态”。构建小型、独立的、随时可以运行的应用程序可以为您的代码带来极大的灵活性和弹性。
Spring Boot 的许多定制的功能使在生产中大规模构建和运行微服务变得容易。
并且不要忘记,没有Spring Cloud 的微服务架构是不完整的,Spring Cloud可以简化管理并提高容错能力。
微服务是一种现代软件方法,其中应用程序代码以小的、可管理的、独立于其他部分的方式交付。
它的这种特性(小规模和相对隔离)可以带来许多额外的好处,例如更容易维护、提高生产力、更大的容错能力、更好的业务一致性等等。使用 Spring Boot,您的微服务可以从小规模开始并快速迭代。这就是它成为 Java™ 微服务事实上的标准的原因。
使用 Spring Initializr 快速启动您的项目,然后打包为 JAR。使用 Spring Boot 的嵌入式服务器模型,
您可以在几分钟内准备好运行。Spring 可以帮助您缓解微服务的分布式特性带来的挑战。用几个随时可以运行的云模式,
Spring Cloud可以帮助服务发现、负载平衡、熔断、分布式跟踪和监控。它甚至可以充当 API 网关。无论您选择哪种消息传递平台,Spring Cloud Stream 都可以轻松使用和生成事件。Spring Cloud Stream 只需几行代码即可将您的微服务与实时消息传递连接起来,以帮助您构建高度可扩展的事件驱动系统。Spring Boot 的可选检测框架,Micrometer,将指标直接发送到 Prometheus、Atlas 等,从而提供有价值的见解。这是Spring cloud的 Sleuth 和 Zipkin 项目进行的补充,它可以提供分布式跟踪,以便您可以实时跟踪正在发生的事情。微服务的小型、无状态特性使其成为水平扩展的理想选择。TAS 和 PKS
等平台可以提供可扩展的基础架构以匹配并大大减少您的管理开销。使用云连接器,您还可以轻松使用多个后端服务。";
逻辑分析
那么当我们拿到这堆字符串的时候,应该怎么办呢?
首先我们应该需要明白分页的一些必要数据元素有哪些, 最基本的数据有如下
1.每页显示的字符数量 相当于每页显示多少文字,也就是单页最大字数
变量名为:$pageSize
2.整个字符串内容的总字数 字符串内容长度,也就是总字数
变量名:$totalStrlength
3.总字数和每页显示的字符数量计算出总页数 总页数
变量名:$totalPages=(strlen($str)/$pageSize)
4.偏移量,用来控制当前页开头和结尾的位置 变量名: $offset=($page-1)*$pageSize
例如
每页容显示100字,文章内容有855字,那么当页面
传递page=2
, 时应该显示第200至300之间的字符串内容
而且每一页的显示内容可以通过内容截取来实现!
5.当前页,通过url地址传递过来 $_GET接收
变量名:$page
这样整个数字分页
的准备工作就已经做好了,接下来我们可以写代码了!
代码
php代码逻辑
//每页显示的字符数量
$pageSize = 200;
//整个字符串内容的总字数
$totalStrlength = (mb_strlen($str));
//总页数
$totalPages = (ceil(mb_strlen($str) / $pageSize));
//当前页
if (isset($_GET['page'])) {
$page = $_GET['page'];
} else {
$page = 1;
}
//计算偏移量
$offset = ($page - 1) * $pageSize;
//输出结构
$bannerPage = '<div class="content">';
//显示内容
$bannerPage .= '<p>';
$bannerPage .= mb_substr($str, $offset, $pageSize);
$bannerPage .= '</p>';
//显示页码
$bannerPage .= '<div class="page">';
for ($i = 1; $i <= $totalPages; $i++) {
$bannerPage .= "<a href='index.php?page=" . $i . "'>" . $i . "</a>";
}
$bannerPage .= "<p>共{$totalPages}页 当前为第<span>{$page}</span>页</p>";
$bannerPage .= '</div>';
$bannerPage .= '</div>';
html+css
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内容分页显示</title>
<style type="text/css">
.content {
margin: 100px auto;
width: 500px;
padding: 20px;
border: 1px solid black;
box-shadow: 2px 2px 2px #ccc;
}
.content > .page {
text-align: center;
word-break: break-all;
padding: 10px;
}
.content > .page > a {
color: #000;
text-decoration: none;
border: 1px dotted #cccccc;
padding: 5px;
display: inline-block;
width: 50px;
margin: 5px 2px;
text-align: center;
}
.content > .page > a:hover {
background: yellow;
color: red;
}
.content > .page span {
color: red;
}
</style>
</head>
<body>
<?php
//输出分页内容与数字页码
echo $bannerPage;
?>
</body>
</html>
效果如下
文字+数字分页
这种分页简单的说就是分页的页码上不光有数字,还有文字, 也就是说在已经有了的数字分页的基础上在加上一个文字的分页效果!
我们其实只需要简单的修改一下分页结构就可以了
代码
//每页显示的字符数量
$pageSize = 200;
//整个字符串内容的总字数
$totalStrlength = (mb_strlen($str));
//总页数
$totalPages = (ceil(mb_strlen($str) / $pageSize));
//当前页
if (isset($_GET['page'])) {
$page = $_GET['page'];
} else {
$page = 1;
}
//计算偏移量
$offset = ($page - 1) * $pageSize;
//输出结构
$bannerPage = '<div class="content">';
//显示内容
$bannerPage .= '<p>';
$bannerPage .= mb_substr($str, $offset, $pageSize);
$bannerPage .= '</p>';
//显示页码
$bannerPage .= '<div class="page">';
//文字分页
$bannerPage .= '<a href="index.php?page=1">首页</a>';
if ($page > 1) {
$bannerPage .= '<a href="index.php?page=' . ($page - 1) . '">上一页</a>';
} else {
$bannerPage .= '<a href="index.php?page=1">上一页</a>';
}
for ($i = 1; $i <= $totalPages; $i++) {
if ($page == $i) {
$bannerPage .= "<a href='index.php?page=" . $i . "' class='active'>" . $i . "</a>";
} else {
$bannerPage .= "<a href='index.php?page=" . $i . "'>" . $i . "</a>";
}
}
//文字分页
if ($page < $totalPages) {
$bannerPage .= '<a href="index.php?page=' . ($page + 1) . '">下一页</a>';
} else {
$bannerPage .= '<a href="index.php?page=' . $totalPages . '">下一页</a>';
}
$bannerPage .= '<a href="index.php?page=' . $totalPages . '">尾页</a>';
$bannerPage .= ' 共' . $totalPages . '页当前为第<span>' . $page . '</span>页 ';
$bannerPage .= '<form action="index.php">';
$bannerPage .= '<input type="text" name="page" value="' . $page . '"/>';
$bannerPage .= '<input type="submit" value="GO"/>';
$bannerPage .= '</form>';
$bannerPage .= '</div>';
$bannerPage .= '</div>';
html+css代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内容分页显示</title>
<style type="text/css">
.content {
margin: 100px auto;
width: 900px;
padding: 20px;
border: 1px solid black;
box-shadow: 2px 2px 2px #ccc;
}
.content > .page {
text-align: center;
word-break: break-all;
padding: 10px;
}
.content > .page > a {
color: #000;
text-decoration: none;
border: 1px dotted #cccccc;
padding: 5px;
display: inline-block;
width: 50px;
margin: 5px 2px;
text-align: center;
}
.content > .page > a:hover {
background: yellow;
color: red;
}
.content > .page span {
color: red;
}
.content > .page > a.active {
background: yellow;
color: red;
}
.content > .page > form {
display: inline-block;
}
.content > .page > form > input[type=text] {
width: 20px;
margin: 0px 2px;
text-align: center;
outline: 0;
}
</style>
</head>
<body>
<?php
//显示分页
echo $bannerPage;
?>
如图
分页效果优化
其实我们还可以增加一些效果,让用户体验更佳!
省略号分页效果
例如
让分页带有左右省略号
显示的分页,并且显示的页码由我们开发者指定显示多少, 也就是说在一定的时候我们要在分页中显示省略号或者其他字符串样式!
如图
代码逻辑
- 首先,我们自己可以定义要显示的页码数量是多少, 然后根据这个显示数量求出左右偏移量,这个左右偏移量其实就是当前页之外的左右页码个数,所以定义的页码显示数最好是一个
基数
- 我们在
for循环
的时候,就不是从第1页~尾页这样子去循环了,而是根据我们自己定义的循环条件的开始值与结束值进行循环, 到时候就是通过当前页来计算出左右的页码数,也就是说通过当前页对开始和结尾页码进行限制!
代码如下
$pageSize = 100;
$totalStrlength = (mb_strlen($str));
$totalPages = (ceil(mb_strlen($str) / $pageSize));
if (isset($_GET['page'])) {
$page = $_GET['page'];
} else {
$page = 1;
}
$offset = ($page - 1) * $pageSize;
//输出结构
$bannerPage = '<div class="content">';
//显示内容
$bannerPage .= '<p>';
$bannerPage .= mb_substr($str, $offset, $pageSize);
$bannerPage .= '</p>';
$bannerPage .= '<div class="page">';
$bannerPage .= '<a href="index.php?page=1">首页</a>';
if ($page > 1) {
$bannerPage .= '<a href="index.php?page=' . ($page - 1) . '">上一页</a>';
} else {
$bannerPage .= '<a href="index.php?page=1">上一页</a>';
}
//显示左右省略号
$showPage=5;
$PageOffset=ceil(($showPage-1)/2);
$start=1;
$end=$totalPages;
if($page>$PageOffset){
$start=$page-$PageOffset;
$end=$totalPages>($page+$PageOffset)?$page+$PageOffset:$totalPages;
}else{
$start=1;
$end=$totalPages>$showPage?$showPage:$totalPages;
}
//根据当前页和偏移量来计算想显示出来的页码
if($page>$PageOffset+2){
$bannerPage .= "<a href='index.php?page=1'>1</a>";
$bannerPage .= "<a href='index.php?page=2'>2</a>";
}
if($totalPages>$showPage && $page>$PageOffset+1){
$bannerPage .='<a href="javascript:;">...</a>';
}
for ($i = $start; $i <= $end; $i++) {
if ($page == $i) {
$bannerPage .= "<a href='index.php?page=" . $i . "' class='active'>" . $i . "</a>";
} else {
$bannerPage .= "<a href='index.php?page=" . $i . "'>" . $i . "</a>";
}
}
if($totalPages>$showPage && $totalPages>($page+$PageOffset)){
$bannerPage .='<a href="javascript:;">...</a>';
}
//根据当前页和偏移量来计算想显示出来结尾页码
if($page<($PageOffset+2)){
$bannerPage .= "<a href='index.php?page=".($totalPages-1)."'>".($totalPages-1)."</a>";
$bannerPage .= "<a href='index.php?page=".$totalPages."'>".$totalPages."</a>";
}
if ($page < $totalPages) {
$bannerPage .= '<a href="index.php?page=' . ($page + 1) . '">下一页</a>';
} else {
$bannerPage .= '<a href="index.php?page=' . $totalPages . '">下一页</a>';
}
$bannerPage .= '<a href="index.php?page=' . $totalPages . '">尾页</a>';
$bannerPage .= ' 共' . $totalPages . '页当前为第<span>' . $page . '</span>页 ';
$bannerPage .= '<form action="index.php">';
$bannerPage .= '<input type="text" name="page" value="' . $page . '"/>';
$bannerPage .= '<input type="submit" value="GO"/>';
$bannerPage .= '</form>';
$bannerPage .= '</div>';
$bannerPage .= '</div>';
效果如下
我们其实还可以根据当前页和偏移量来计算想显示出来的页码
//根据当前页和偏移量来计算想显示出来开始的页码
if($page>$PageOffset+2){
$bannerPage .= "<a href='index.php?page=1'>1</a>";
$bannerPage .= "<a href='index.php?page=2'>2</a>";
}
//根据当前页和偏移量来计算想显示出来结尾页码
if($page<($PageOffset+2)){
$bannerPage .= "<a href='index.php?page=".($totalPages-1)."'>".($totalPages-1)."</a>";
$bannerPage .= "<a href='index.php?page=".$totalPages."'>".$totalPages."</a>";
}
效果如下
分页的页码结构其实,我们可以通过需求不断的进行优化和修改,来达到用户体验!
分页有很多现实的效果样式,如下
共xxxx条记录,每页显示xxx条,当前第x/xxxx页 [首页] [上页] [下页] [尾页]
当前第x/xxx页 [首页] [上页] 1 2 3 4 5 6 7 8 9 10 [下页] [尾页]
你都可以根据自己的需求去实现一下!
面向对象分页模块封装类
如果你会面向对象编程
的思维逻辑,其实我们就可以把分页的所有功能封装在一个对象里面!
那么接下来我们写一个Page对象
这样的分页模块
功能来完成分页操作, 方便在项目当中随时调用分页功能!
首先定义一个Page.class.php
的文件用来写这个分页类
Page分页类封装代码
class Page{
//属性定义
private $data; //分页数据
private $pageSize; //每页显示的字符数量
private $totalStrlength; //整个字符串内容的总字数
private $totalPages; //总页数
private $nowPage; //当前页
private $offset; //内容获取偏移量
private $nowPageKeyName; //当前页接收键名称
private $PageContent; //保存分页内容
private $bannerPage; //保存分页页码结构
private $fileName; //当前文件名称
private $style; //分页页码CSS样式
/**
* 分页类构造函数 初始化
* @param string $data
* @param int $pageSize
* @param string $key
*/
public function __construct($data='',$pageSize=50,$key='',$fileName='index.php'){
//初始化赋值默认值
$this->data=$data;
$this->pageSize=$pageSize;
if(!empty($data)){
$this->totalStrlength=(mb_strlen($this->data));
$this->totalPages=ceil(mb_strlen($this->data)/$this->pageSize);
}
$this->nowPageKeyName=$this->_getNowPageKeyName($key);
$this->nowPage=$this->_getNowPage();
$this->offset=($this->nowPage-1)*$this->pageSize;
$this->fileName=$fileName;
}
/**
* @return false|float|int
*/
private function _getNowPage(){
if(isset($_GET[$this->nowPageKeyName])){
$this->nowPage=$_GET[$this->nowPageKeyName];
//容错处理
if(empty($this->nowPage) || !is_numeric($this->nowPage)){
$this->nowPage=1;
}else{
$this->nowPage=intval($this->nowPage);
}
$this->nowPage=($this->nowPage<0)?1:$this->nowPage;
$this->nowPage=($this->nowPage>$this->totalPages)?$this->totalPages:$this->nowPage;
}else{
$this->nowPage=1;
}
//处理好当前页的结果返回
return $this->nowPage;
}
/**
* @param $name
* @return string
*/
private function _getNowPageKeyName($name){
if(!empty($name)){
return $name;
}else{
return 'page';
}
}
/**
* @return string
*/
public function _getPageContent(){
//显示内容
$this->PageContent .= '<p>';
$this->PageContent .= mb_substr($this->data, $this->offset, $this->pageSize);
$this->PageContent .= '</p>';
//返回结果
return $this->PageContent;
}
/**
* @return string
*/
public function _getPageNumber(){
//设置CSS样式
echo $this->setPageStyleCss();
//显示页码
$this->bannerPage .= '<div class="page">';
$this->bannerPage .= '<a href="'.$this->fileName.'?'.$this->nowPageKeyName.'=1">首页</a>';
if ($this->nowPage > 1) {
$this->bannerPage .= '<a href="'.$this->fileName.'?'.$this->nowPageKeyName.'=' . ($this->nowPage - 1) . '">上一页</a>';
} else {
$this->bannerPage .= '<a href="'.$this->fileName.'?'.$this->nowPageKeyName.'=1">上一页</a>';
}
$showPage=5;
$PageOffset=ceil(($showPage-1)/2);
$start=1;
$end=$this->totalPages;
if($this->nowPage>$PageOffset){
$start=$this->nowPage-$PageOffset;
$end=$this->totalPages>($this->nowPage+$PageOffset)?$this->nowPage+$PageOffset:$this->totalPages;
}else{
$start=1;
$end=$this->totalPages>$showPage?$showPage:$this->totalPages;
}
if($this->nowPage>$PageOffset+2){
$this->bannerPage .= "<a href='".$this->fileName."?".$this->nowPageKeyName."=1'>1</a>";
$this->bannerPage .= "<a href='".$this->fileName."?".$this->nowPageKeyName."=2'>2</a>";
}
if($this->totalPages>$showPage && $this->nowPage>$PageOffset+1){
$this->bannerPage .='<a href="javascript:;">...</a>';
}
//循环页码
for ($i = $start; $i <= $end; $i++) {
if ($this->nowPage == $i) {
$this->bannerPage .= "<a href='".$this->fileName."?".$this->nowPageKeyName."=" . $i . "' class='active'>" . $i . "</a>";
} else {
$this->bannerPage .= "<a href='".$this->fileName."?".$this->nowPageKeyName."=" . $i . "'>" . $i . "</a>";
}
}
if($this->totalPages>$showPage && $this->totalPages>($this->nowPage+$PageOffset)){
$this->bannerPage .='<a href="javascript:;">...</a>';
}
if($this->nowPage<($PageOffset+2)){
$this->bannerPage .= "<a href='".$this->fileName."?".$this->nowPageKeyName."=".($this->totalPages-1)."'>".($this->totalPages-1)."</a>";
$this->bannerPage .= "<a href='".$this->fileName."?".$this->nowPageKeyName."=".$this->totalPages."'>".$this->totalPages."</a>";
}
if ($this->nowPage < $this->totalPages) {
$this->bannerPage .= '<a href="'.$this->fileName.'?'.$this->nowPageKeyName.'=' . ($this->nowPage + 1) . '">下一页</a>';
} else {
$this->bannerPage .= '<a href="'.$this->fileName.'?'.$this->nowPageKeyName.'=' . $this->totalPages . '">下一页</a>';
}
$this->bannerPage .= '<a href="'.$this->fileName.'?'.$this->nowPageKeyName.'=' . $this->totalPages . '">尾页</a>';
$this->bannerPage .= ' 共' . $this->totalPages . '页当前为第<span>' . $this->nowPage . '</span>页 ';
$this->bannerPage .= '<form action="'.$this->fileName.'">';
$this->bannerPage .= '<input type="text" name="'.$this->nowPageKeyName.'" value="' . $this->nowPage . '"/>';
$this->bannerPage .= '<input type="submit" value="GO"/>';
$this->bannerPage .= '</form>';
$this->bannerPage .= '</div>';
//返回结果
return $this->bannerPage;
}
/**
* @return string
*/
private function setPageStyleCss(){
$this->style=<<<EOF
<style type="text/css">
.content {
margin: 100px auto;
width: 500px;
padding: 20px;
border: 1px solid black;
box-shadow: 2px 2px 2px #ccc;
}
.page {
text-align: center;
word-break: break-all;
padding: 10px;
}
.page > a {
color: #000;
text-decoration: none;
border: 1px dotted #cccccc;
padding: 5px;
display: inline-block;
width: 50px;
margin: 5px 2px;
text-align: center;
}
.page > a:hover {
background: yellow;
color: red;
}
.page span {
color: red;
}
.page > a.active {
background: yellow;
color: red;
}
.page > form {
display: inline-block;
}
.page > form > input[type=text] {
width: 20px;
margin: 0px 2px;
text-align: center;
outline: 0;
}
</style>
EOF;
return $this->style;
}
}
?>
Page分页类使用方法
引入Page.class.php
include 'class/Page.class.php';
实例化Page类
与传递参数
//实例化对象
$page=new Page(传递字符串内容,显示数量,'当前页Key名','页面名称');
在html
页面中我们调用$page对象
中的_getPageContent方法
和_getPageNumber方法
来显示分页内容
和分页的页码结构
代码如下
<div class="content">
<?php
//显示分页内容
echo $page->_getPageContent();
?>
</div>
<?php
//显示分页结构
echo $page->_getPageNumber();
?>
有了面向对象的封装之后,这样我们使用分页来进行一些简单的内容文字分页就很简单了
效果跟之前完全是一样的
效果如下
最后
分页的代码逻辑实现有很多种,并且也可以根据自己的需求进一步优化代码的结构,这里就不过多赘述了,大家可以自己去试试看,很有趣的!
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看
的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇