thinkphp5 自定义分页样式

第一种

自定义分页类 放到extra\page,<?php
namespace page;
// +----------------------------------------------------------------------
// | ThinkPHP [ WE CAN DO IT JUST THINK ]
// +----------------------------------------------------------------------
// | Copyright (c) 2006~2017 http://thinkphp.cn All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: zhangyajun <448901948@qq.com>
// +----------------------------------------------------------------------
use think\Paginator;
class Page extends Paginator
{//首页protected function home() {if ($this->currentPage() > 1) {return "<a href='" . $this->url(1) . "' title='首页'>首页</a>";} else {return "<p>首页</p>";}}//上一页protected function prev() {if ($this->currentPage() > 1) {return "<a href='" . $this->url($this->currentPage - 1) . "' title='上一页'>上一页</a>";} else {return "<p>上一页</p>";}}//下一页protected function next() {if ($this->hasMore) {return "<a href='" . $this->url($this->currentPage + 1) . "' title='下一页'>下一页</a>";} else {return"<p>下一页</p>";}}//尾页protected function last() {if ($this->hasMore) {return "<a href='" . $this->url($this->lastPage) . "' title='尾页'>尾页</a>";} else {return "<p>尾页</p>";}}//统计信息protected function info(){return "<p class='pageRemark'>共<b>" . $this->lastPage ."</b>页<b>" . $this->total . "</b>条数据</p>";}/*** 页码按钮* @return string*/protected function getLinks(){$block = ['first'  => null,'slider' => null,'last'   => null];$side   = 3;$window = $side * 2;if ($this->lastPage < $window + 6) {$block['first'] = $this->getUrlRange(1, $this->lastPage);} elseif ($this->currentPage <= $window) {$block['first'] = $this->getUrlRange(1, $window + 2);$block['last']  = $this->getUrlRange($this->lastPage - 1, $this->lastPage);} elseif ($this->currentPage > ($this->lastPage - $window)) {$block['first'] = $this->getUrlRange(1, 2);$block['last']  = $this->getUrlRange($this->lastPage - ($window + 2), $this->lastPage);} else {$block['first']  = $this->getUrlRange(1, 2);$block['slider'] = $this->getUrlRange($this->currentPage - $side, $this->currentPage + $side);$block['last']   = $this->getUrlRange($this->lastPage - 1, $this->lastPage);}$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']);}return $html;}/*** 渲染分页html* @return mixed*/public function render(){if ($this->hasPages()) {if ($this->simple) {return sprintf('%s<div class="pagination">%s %s %s</div>',$this->css(),$this->prev(),$this->getLinks(),$this->next());} else {return sprintf('%s<div class="pagination">%s %s %s %s %s %s</div>',$this->css(),$this->home(),$this->prev(),$this->getLinks(),$this->next(),$this->last(),$this->info());}}}/*** 生成一个可点击的按钮** @param  string $url* @param  int    $page* @return string*/protected function getAvailablePageWrapper($url, $page){return '<a href="' . htmlentities($url) . '" title="第"'. $page .'"页" >' . $page . '</a>';}/*** 生成一个禁用的按钮** @param  string $text* @return string*/protected function getDisabledTextWrapper($text){return '<p class="pageEllipsis">' . $text . '</p>';}/*** 生成一个激活的按钮** @param  string $text* @return string*/protected function getActivePageWrapper($text){return '<a href="" class="cur">' . $text . '</a>';}/*** 生成省略号按钮** @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 css(){return '  <style type="text/css">.pagination p{margin:0;cursor:pointer}.pagination{height:40px;padding:20px 0px;}.pagination a{display:block;float:left;margin-right:10px;padding:2px 12px;height:24px;border:1px #cccccc solid;background:#fff;text-decoration:none;color:#808080;font-size:12px;line-height:24px;}.pagination a:hover{color:#077ee3;background: white;border:1px #077ee3 solid;}.pagination a.cur{border:none;background:#077ee3;color:#fff;}.pagination p{float:left;padding:2px 12px;font-size:12px;height:24px;line-height:24px;color:#bbb;border:1px #ccc solid;background:#fcfcfc;margin-right:8px;}.pagination p.pageRemark{border-style:none;background:none;margin-right:0px;padding:4px 0px;color:#666;}.pagination p.pageRemark b{color:red;}.pagination p.pageEllipsis{border-style:none;background:none;padding:4px 0px;color:#808080;}.dates li {font-size: 14px;margin:20px 0}.dates li span{float:right}</style>';}
}

修改配置文件

//分页配置
'paginate'               => ['type'      => 'page\Page','var_page'  => 'page','list_rows' => 15,
],

最后的样式如下

第二种

新建Layui.php，内容如下

<?php

namespace layui;

use think\Paginator;

class Layui extends Paginator
{
protected $uri;
/**
* 上一页按钮
* @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);
}

/**
* 页码按钮
* @return string
*/
protected function getLinks()
{
if ($this->simple)
return '';

$block = [
'first' => null,
'slider' => null,
'last' => null
];

$side = 3;
$window = $side * 2;

if ($this->lastPage < $window + 6) {
$block['first'] = $this->getUrlRange(1, $this->lastPage);
} elseif ($this->currentPage <= $window) {
$block['first'] = $this->getUrlRange(1, $window + 2);
$block['last'] = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
} elseif ($this->currentPage > ($this->lastPage - $window)) {
$block['first'] = $this->getUrlRange(1, 2);
$block['last'] = $this->getUrlRange($this->lastPage - ($window + 2), $this->lastPage);
} else {
$block['first'] = $this->getUrlRange(1, 2);
$block['slider'] = $this->getUrlRange($this->currentPage - $side, $this->currentPage + $side);
$block['last'] = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
}

$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']);
}

return $html;
}

/**
* 渲染分页html
* @return mixed
*/
public function render()
{
if ($this->hasPages()) {
if ($this->simple) {
return sprintf(
'<ul class="pager">%s %s</ul>',
$this->getPreviousButton(),
$this->getNextButton()
);
} else {
return sprintf(
'<div class="layui-laypage">%s %s %s %s %s</div>',
$this->getTotal($this->total),
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton(),
$this->goPage()
);
}
}
}

/**
* 生成一个可点击的按钮
*
* @param string $url
* @param int $page
* @return string
*/
protected function getAvailablePageWrapper($url, $page)
{
return '<a href="' . htmlentities($url) . '">' . $page . '</a>';
}

/**
* 生成一个禁用的按钮
*
* @param string $text
* @return string
*/
protected function getDisabledTextWrapper($text)
{
return '<a class="layui-laypage-prev layui-disabled" >' . $text . '</a>';
}

/**
* 生成一个激活的按钮
*
* @param string $text
* @return string
*/
protected function getActivePageWrapper($text)
{
return '<span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>' . $text . '</em></span>';
}

/**
* 生成省略号按钮
*
* @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);
}

/**
* 生成总条数
* @param $num
* @return string
*/
protected function getTotal($num)
{
return '<span class="layui-laypage-count">共'.$num.'条</span>';
}

/**
* 跳转
* @return string
*/
protected function goPage()
{

$this->getUri();
return '<span class="layui-laypage-skip">到第<input type="text" min="1" value="1" οnkeydοwn="javascript:if(event.keyCode==13){var page=(this.value>'.$this->lastPage.')?'.$this->lastPage.':this.value;location=\''.$this->uri.'page=\'+page+\'\'}" class="layui-input" ><button type="button" class="layui-laypage-btn" οnclick="javascript:var page =(this.previousSibling.value > '.$this->lastPage.') ? '.$this->lastPage.': this.previousSibling.value;location=\''.$this->uri.'page=\'+page+\'\'">确定</button></span>';
}

/**
* 获取url
*/
private function getUri(){
$url=$_SERVER["REQUEST_URI"].(strpos($_SERVER["REQUEST_URI"], '?')?'':"?");
$parse=parse_url($url);

if(isset($parse["query"])){
parse_str($parse['query'],$params);
unset($params["page"]);
$url=$parse['path'] . '?' . http_build_query($params) .'&';
}else{
$url=$parse['path'] . '?';
}

$this->uri = $url;

}
}

修改config.php配置

//分页配置
'paginate' => [
/* 'type' => 'bootstrap',*/
'type' => 'layui\Layui',
'var_page' => 'page',
'list_rows' => 15,
],

在模板中引入

{$list->render()}

效果如下

thinkphp5 自定义分页样式相关推荐

Laravel自定义分页样式
Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页.其实 Laravel 的分页组件是 ...
上接扩展GridView控件(10) - 自定义分页样式
5.重写OnRowCreated以实现自定义分页样式 /// <summary> /// OnRowCreated // ...
php 分页样式定制,Laravel自定义分页样式
Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页.其实 Laravel 的分页组件是 ...
h5分页样式 css,【前端技术】Quasar Table: 自定义分页样式
说点什么一个管理端的系统,最常用的是数据表格及分页. 这里我记录一下使用QTable 数据表及QPagination组件来实现想要的数据表格及分页的过程. 可直接跳至文章末尾,看实现效果:传送门. ...
GridView自定义分页样式（上一页，下一页，到第几页）（新手教程）
今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个.不是很美观,不过还是很实用的,先看下效果吧,如图(1).演示地址http://www.veryam. ...
Pbootcms自定义分页样式,适用于多种环境
系统自带分页效果 pbootcms 程序自带的分页样式为: {page:bar} ,时间长了发现难以满足不同网站仿制时分页的要求,系统自带标签如下,可以灵活搭配使用: {page:bar} 系 ...
element ui——Pagination 自定义分页样式
我们可以看到,element ui Pagination分页默认样式直接显示首页 - 中间页 - 末页,但当项目中数据量过大时,用户直接点击最后一页可能会导致后端elk崩溃.项目最后要求不能把 ...
Thinkphp5 自定义分页类
1.在extend\目录下创建page目录,在page目录中创建Page.php文件,将以下代码放入文件中 <?php namespace page; use think\Paginator; ...
dedecms如何自定义分页样式
找到include/arc.listview.class.php,在里面有静态和动态两种显示分页样式的方法,找到具体代码,根据自己需求修改,就可以了. 然后在前端就只需要如下代码:{dede:page ...
Laravel自定义分页样式 1
Laravel中提供非常简便的分页功能,只要在页面上使用<?php echo $order->render(); ?> 即可,但是自带的分页样式是在是不敢恭维.后来试着找了下源码,在 ...

thinkphp5 自定义分页样式

thinkphp5 自定义分页样式相关推荐

最新文章

热门文章