TP5 分页样式修改带跳转
在 thinkphp/library/think/paginator\driver 创建 Bootstrap5.php 谁的
由于Bootstrap类是tp自带的类，所以为了我们尽量不要改动底层自带的类，这里拷贝一下Bootstrap类然后重命名为 Bootstrap5
目录结构如图
创建文件
<?php
/**
* 分页
* 按照段分页
*
* 例1：1-5，4-8，7-11，...
* 在第一段时：点击5时跳到下一段
* 在第二段时：点击8时跳到下一段，点击4时回到上一段
*
* 例2：1-7，6-12，11-17，...
* 在第二段时：点击12时跳到下一段点击6时回到上一段
* 在第三段时：点击17时跳到下一段，点击11时回到上一段
*
*
*/
namespace think\paginator\driver;
use think\Config;
use think\Paginator;
class Bootstrap5 extends Paginator
{
public $rollPage=3;//分页栏每页显示的页数
public $showPage=10;//总页数超过多少条时显示的首页末页
//修改分页 计算总数
protected function getTotal(){
$html='<li><span>共<b>' . $this->lastPage .
'</b>页'.$this->total().'条数据</span></li>';
return $html;
}
/**
* 上一页按钮
* @param string $text
* @return string
*/
protected function getPreviousButton($text = "上一页")
{
if ($this->currentPage() <= 1) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url(
$this->currentPage() - 1
);
return $this->getPageLinkWrapper($url, $text);
}
/**
* 下一页按钮
* @param string $text
* @return string
*/
protected function getNextButton($text = '下一页')
{
if (!$this->hasMore) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url($this->currentPage() + 1);
return $this->getPageLinkWrapper($url, $text);
}
/**
* 首页按钮
* @param string $text
* @return string
*/
protected function getFirstButton($text = '首页')
{
// $nowPage = $this->rollPage;//计算分页临时变量
// //当 总页数大于定义的页数时 且 当前页数大于前几页时 显示首页
// if ($this->lastPage > $this->showPage && $this->currentPage > $nowPage) {
// $url = $this->url(1);
// return $this->getPageLinkWrapper($url, $text);
// }
if ($this->currentPage() <= 1) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url(1);
return $this->getPageLinkWrapper($url, $text);
}
/**
* 末页按钮
* @param string $text
* @return string
*/
protected function getLastButton($text = '末页')
{
$nowPage = $this->rollPage;//计算分页临时变量
//当 总页数大于定义的页数时 且 当前页数小于最后的几页时 显示末页
if ($this->lastPage > $this->showPage && $this->currentPage < ($this->lastPage - $nowPage)) {
$url = $this->url($this->lastPage);
return $this->getPageLinkWrapper($url, $text);
}
}
//统计信息
protected function info(){
return "<p class='pageRemark'>共<b>" . $this->lastPage .
"</b>页<b>" . $this->total . "</b>条数据</p>";
}
/**
* 页码按钮
* @return string
*/
protected function getLinks()
{
if ($this->simple)
return '';
$block = [
'first' => null,
'slider' => null,
'last' => null
];
$rollPage = $this->rollPage;//分页栏每页显示的页数
$nowPage = floor($rollPage/2);//计算分页临时变量
if($this->lastPage <= $rollPage){
$block['first'] = $this->getUrlRange(1, $this->lastPage);
}else if($this->currentPage==0 || $this->currentPage<$rollPage){
$block['first'] = $this->getUrlRange(1, $rollPage);
}else{
$n=floor(($this->currentPage+($rollPage-4))/($rollPage-2));
$start=$n*($rollPage-2)-($rollPage-3);
$end=$start+$rollPage-1;
$end=$end>$this->lastPage ? $this->lastPage : $end;
$block['first'] = $this->getUrlRange($start,$end);
}
$html = '';
if (is_array($block['first'])) {
$html .= $this->getUrlLinks($block['first']);
}
if (is_array($block['slider'])) {
$html .= $this->getDots();
$html .= $this->getUrlLinks($block['slider']);
}
if (is_array($block['last'])) {
$html .= $this->getDots();
$html .= $this->getUrlLinks($block['last']);
}
// $html.=$this->getGoPageWrapper();
return $html;
}
/**
* 渲染分页html
* @return mixed
*/
public function render()
{
if ($this->hasPages()) {
if ($this->simple) {
return sprintf(
'<ul class="pager">%s %s %s %s %s</ul>',
$this->getFirstButton(),
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton(),
$this->getLastButton()
);
} else {
$btn_cfg=Config::get('paginate.page_button');
$btn_str='<ul class="pagination">';
$btn_str.=$btn_cfg['first_page']?'%s2':'';
$btn_str.=$btn_cfg['turn_page']?'%s3':'';
$btn_str.='%s4';
$btn_str.=$btn_cfg['turn_page']?'%s5':'';
$btn_str.=$btn_cfg['last_page']?'%s6':'';
$btn_str.= $btn_cfg['total_rows']?'%s1':'';
$btn_str.= $btn_cfg['go_page']?'%s7':'';
$page_str=str_replace(array('%s1','%s2','%s3','%s4','%s5','%s6','%s7'),array($this->getTotal(),$this->getFirstButton(),$this->getPreviousButton(),$this->getLinks(),$this->getNextButton(),$this->getLastButton(),$this->gopage()),$btn_str);
$page_str.= $this->css();
return $page_str;
/*return sprintf(
'<ul class="pagination">%s %s %s %s</ul>',
$this->getTotal(),
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton()
);*/
}
}
}
/**
* 生成一个可点击的按钮
*
* @param string $url
* @param int $page
* @return string
*/
protected function getAvailablePageWrapper($url, $page)
{
return '<li><a href="' . htmlentities($url) . '">' . $page . '</a></li>';
}
/**
* 生成一个禁用的按钮
*
* @param string $text
* @return string
*/
protected function getDisabledTextWrapper($text)
{
return '<li class="disabled"><span>' . $text . '</span></li>';
}
/**
* 生成一个激活的按钮
*
* @param string $text
* @return string
*/
protected function getActivePageWrapper($text)
{
return '<li class="active"><span>' . $text . '</span></li>';
}
protected function getGoPageWrapper(){
return '<li><input type="text" class="form-control" style="width: 60px;" placeholder="跳到" name="page"></li>';
}
/**
* 跳转到哪页
* @return string
*/
protected function goPage()
{
$url = $this->getCurrentUrl();
// return $gotohtml="<li><form action='' method='get' ><a style='float:left;margin-left:2px;'><input style='height:33px;' type='text' class='form-control' name='page' placeholder='请选择页数'> <input class='form-control' style='height:33px;' type='submit' value='确定'> </a></form></li>";
return "<li><span class='pjax-go-page' style='padding: 0;margin: 0;'><input class='goto-input' placeholder='跳转页' autocomplete='off' name='page'><button class='btn btn-primary btn-sm' data-href='" . $url . "' οnclick='pjax_go_page(this)'>跳转</button></span></li>";
// $gotoHtml="<li><form action='' method='get' ><input type='text' class='goto-input' name='page' placeholder='请选择页数'> <input type='submit' class='btn btn-info btn-sm' value='确定'></form></li>";
// return $gotoHtml;
}
/**
* 分页样式
*/
protected function css(){
return ' <style type="text/css">
.goto-input {
padding: 0 0 0 5px;
margin: 0;
border: none;
height: 36px;
}
</style>';
}
/**
* 生成省略号按钮
*
* @return string
*/
protected function getDots()
{
return $this->getDisabledTextWrapper('...');
}
/**
* 批量生成页码按钮.
*
* @param array $urls
* @return string
*/
protected function getUrlLinks(array $urls)
{
$html = '';
foreach ($urls as $page => $url) {
$html .= $this->getPageLinkWrapper($url, $page);
}
return $html;
}
/**
* 生成普通页码按钮
*
* @param string $url
* @param int $page
* @return string
*/
protected function getPageLinkWrapper($url, $page)
{
if ($page == $this->currentPage()) {
return $this->getActivePageWrapper($page);
}
return $this->getAvailablePageWrapper($url, $page);
}
protected function getCurrentUrl() {
if (count($this->options['query']) > 0) {
$parameters = $this->options['query']; // 获取参数
}
$url = $this->options['path'];
if (isset($parameters['page'])) { // 参数中是否有页数
unset($parameters['page']);
}
$parameters['page'] = '';
if (!empty($parameters)) {
$url .= '?' . urldecode(http_build_query($parameters, null, '&'));
}
return $url . $this->buildFragment(); // 返回的url类似于'/index/XXX/XXX/?param1=xxx¶m2=xxx&page='
}
}
最新代码
<?php
/**
* 分页
* 按照段分页
*
* 例1：1-5，4-8，7-11，...
* 在第一段时：点击5时跳到下一段
* 在第二段时：点击8时跳到下一段，点击4时回到上一段
*
* 例2：1-7，6-12，11-17，...
* 在第二段时：点击12时跳到下一段点击6时回到上一段
* 在第三段时：点击17时跳到下一段，点击11时回到上一段
*
*
*/
namespace think\paginator\driver;
use think\Config;
use think\Paginator;
class Bootstrap5 extends Paginator
{
public $rollPage=3;//分页栏每页显示的页数
public $showPage=10;//总页数超过多少条时显示的首页末页
//修改分页 计算总数
protected function getTotal(){
$html='<li><span>共<b>' . $this->lastPage .
'</b>页'.$this->total().'条数据</span></li>';
return $html;
}
/**
* 上一页按钮
* @param string $text
* @return string
*/
protected function getPreviousButton($text = "上一页")
{
if ($this->currentPage() <= 1) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url(
$this->currentPage() - 1
);
return $this->getPageLinkWrapper($url, $text);
}
/**
* 下一页按钮
* @param string $text
* @return string
*/
protected function getNextButton($text = '下一页')
{
if (!$this->hasMore) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url($this->currentPage() + 1);
return $this->getPageLinkWrapper($url, $text);
}
/**
* 首页按钮
* @param string $text
* @return string
*/
protected function getFirstButton($text = '首页')
{
// $nowPage = $this->rollPage;//计算分页临时变量
// //当 总页数大于定义的页数时 且 当前页数大于前几页时 显示首页
// if ($this->lastPage > $this->showPage && $this->currentPage > $nowPage) {
// $url = $this->url(1);
// return $this->getPageLinkWrapper($url, $text);
// }
if ($this->currentPage() <= 1) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url(1);
return $this->getPageLinkWrapper($url, $text);
}
/**
* 末页按钮
* @param string $text
* @return string
*/
protected function getLastButton($text = '末页')
{
$nowPage = $this->rollPage;//计算分页临时变量
//当 总页数大于定义的页数时 且 当前页数小于最后的几页时 显示末页
if ($this->lastPage > $this->showPage && $this->currentPage < ($this->lastPage - $nowPage)) {
$url = $this->url($this->lastPage);
return $this->getPageLinkWrapper($url, $text);
}
}
//统计信息
protected function info(){
return "<p class='pageRemark'>共<b>" . $this->lastPage .
"</b>页<b>" . $this->total . "</b>条数据</p>";
}
/**
* 页码按钮
* @return string
*/
protected function getLinks()
{
if ($this->simple)
return '';
$block = [
'first' => null,
'slider' => null,
'last' => null
];
$rollPage = $this->rollPage;//分页栏每页显示的页数
$nowPage = floor($rollPage/2);//计算分页临时变量
if($this->lastPage <= $rollPage){
$block['first'] = $this->getUrlRange(1, $this->lastPage);
}else if($this->currentPage==0 || $this->currentPage<$rollPage){
$block['first'] = $this->getUrlRange(1, $rollPage);
}else{
$n=floor(($this->currentPage+($rollPage-4))/($rollPage-2));
$start=$n*($rollPage-2)-($rollPage-3);
$end=$start+$rollPage-1;
$end=$end>$this->lastPage ? $this->lastPage : $end;
$block['first'] = $this->getUrlRange($start,$end);
}
$html = '';
if (is_array($block['first'])) {
$html .= $this->getUrlLinks($block['first']);
}
if (is_array($block['slider'])) {
$html .= $this->getDots();
$html .= $this->getUrlLinks($block['slider']);
}
if (is_array($block['last'])) {
$html .= $this->getDots();
$html .= $this->getUrlLinks($block['last']);
}
// $html.=$this->getGoPageWrapper();
return $html;
}
/**
* 渲染分页html
* @return mixed
*/
public function render()
{
if ($this->hasPages()) {
if ($this->simple) {
return sprintf(
'<ul class="pager">%s %s %s %s %s</ul>',
$this->getFirstButton(),
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton(),
$this->getLastButton()
);
} else {
$btn_cfg=Config::get('paginate.page_button');
$btn_str='<ul class="pagination">';
$btn_str.=$btn_cfg['first_page']?'%s2':'';
$btn_str.=$btn_cfg['turn_page']?'%s3':'';
$btn_str.='%s4';
$btn_str.=$btn_cfg['turn_page']?'%s5':'';
$btn_str.=$btn_cfg['last_page']?'%s6':'';
$btn_str.= $btn_cfg['total_rows']?'%s1':'';
$btn_str.= $btn_cfg['go_page']?'%s7':'';
$page_str=str_replace(array('%s1','%s2','%s3','%s4','%s5','%s6','%s7'),array($this->getTotal(),$this->getFirstButton(),$this->getPreviousButton(),$this->getLinks(),$this->getNextButton(),$this->getLastButton(),$this->gopage()),$btn_str);
$page_str.= $this->css();
return $page_str;
/*return sprintf(
'<ul class="pagination">%s %s %s %s</ul>',
$this->getTotal(),
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton()
);*/
}
}else{
return sprintf(
'<ul class="pagination">%s %s %s %s %s</ul>',
$this->getFirstButton(),
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton(),
$this->getLastButton()
);
}
}
/**
* 生成一个可点击的按钮
*
* @param string $url
* @param int $page
* @return string
*/
protected function getAvailablePageWrapper($url, $page)
{
return '<li><a href="' . htmlentities($url) . '">' . $page . '</a></li>';
}
/**
* 生成一个禁用的按钮
*
* @param string $text
* @return string
*/
protected function getDisabledTextWrapper($text)
{
return '<li class="disabled"><span>' . $text . '</span></li>';
}
/**
* 生成一个激活的按钮
*
* @param string $text
* @return string
*/
protected function getActivePageWrapper($text)
{
return '<li class="active"><span>' . $text . '</span></li>';
}
protected function getGoPageWrapper(){
return '<li><input type="text" class="form-control" style="width: 60px;" placeholder="跳到" name="page"></li>';
}
/**
* 跳转到哪页
* @return string
*/
protected function goPage()
{
$url = $this->getCurrentUrl();
// return $gotohtml="<li><form action='' method='get' ><a style='float:left;margin-left:2px;'><input style='height:33px;' type='text' class='form-control' name='page' placeholder='请选择页数'> <input class='form-control' style='height:33px;' type='submit' value='确定'> </a></form></li>";
return "<li><span class='pjax-go-page' style='padding: 0;margin: 0;'><input class='goto-input' placeholder='请选择页数' autocomplete='off' id='page' name='page'><a id='goto-page' class='btn btn-info btn-sm' data-href='" . $url . "' οnclick='pjax_go_page(this)'>跳转</a></span></li>";
// $gotoHtml="<li><form action='' method='get' ><input type='text' class='goto-input' name='page' placeholder='请选择页数'> <input type='submit' class='btn btn-info btn-sm' value='确定'></form></li>";
// return $gotoHtml;
}
/**
* 分页样式
*/
protected function css(){
return ' <style type="text/css">
.goto-input {
padding: 0 0 0 5px;
margin: 0;
border: none;
height: 36px;
}
</style>';
}
/**
* 生成省略号按钮
*
* @return string
*/
protected function getDots()
{
return $this->getDisabledTextWrapper('...');
}
/**
* 批量生成页码按钮.
*
* @param array $urls
* @return string
*/
protected function getUrlLinks(array $urls)
{
$html = '';
foreach ($urls as $page => $url) {
$html .= $this->getPageLinkWrapper($url, $page);
}
return $html;
}
/**
* 生成普通页码按钮
*
* @param string $url
* @param int $page
* @return string
*/
protected function getPageLinkWrapper($url, $page)
{
if ($page == $this->currentPage()) {
return $this->getActivePageWrapper($page);
}
return $this->getAvailablePageWrapper($url, $page);
}
protected function getCurrentUrl() {
if (count($this->options['query']) > 0) {
$parameters = $this->options['query']; // 获取参数
}
$url = $this->options['path'];
if (isset($parameters['page'])) { // 参数中是否有页数
unset($parameters['page']);
}
$parameters['page'] = '';
if (!empty($parameters)) {
$url .= '?' . urldecode(http_build_query($parameters, null, '&'));
}
return $url . $this->buildFragment(); // 返回的url类似于'/index/XXX/XXX/?param1=xxx¶m2=xxx&page='
}
}
config.php 进行配置
//分页配置
'paginate' => [
'type' => 'bootstrap5',
'var_page' => 'page',
'list_rows' => 15,
'page_size'=>5, //页码数量
'page_button'=>[
'total_rows'=>true, //是否显示总条数
'turn_page'=>true, //上下页按钮
'turn_group'=>true, //上下组按钮
'first_page'=>true, //首页
'last_page'=>true, //尾页
'go_page' =>true,
],
],
JS 文件配置
function pjax_go_page(which){
var page = $('[name="page"]').val();
let href = $(which).attr('data-href');
window.location = href + page;
}
$("#page").keypress(function (even) {
if (even.which == 13) {
// alert("这里做事件触发的效果");
$("#goto-page").click();
}
});
分页样式结果
3892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
