1. 程式人生 > >tp5的 LayUI分頁樣式實現

tp5的 LayUI分頁樣式實現

null url sprintf 下載文件 pri think 下載 lib tdi

1.先配置你的分頁參數:

//分頁配置

‘paginate‘ => [

‘type‘ => ‘Layui‘,

‘var_page‘ => ‘page‘,

‘list_rows‘ => 15,

‘newstyle‘ => true,

],

2. 下載文件(Layui.php),並復制到 \thinkphp\library\think\paginator\driver

3. 模板文件裏正常使用分頁即可

PHP:

// 獲取分頁顯示
$page = $inquiry_list->render();
// 模板變量賦值
$this->assign(‘list‘, $inquiry_list);
$this->assign(‘page‘, $page);

HTML:
<div class="layui-box layui-laypage layui-laypage-default">{$page}</div>




 分頁源碼:Layui.php

<?php
namespace think\paginator\driver;

use think\Paginator;

class Layui extends Paginator
{

/**
* 上一頁按鈕

* @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(
‘%s %s %s‘,
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton()
);
}
}
}

/**
* 生成一個可點擊的按鈕
*
* @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" >‘ . $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);
}
}

tp5的 LayUI分頁樣式實現