tp5 自定义分页详解

虽然说TP5 有自带的分页的方法 也是好用 但是对于追求原页面样式的的人来说 这是不需要的

今天就来教大家 如何自己定制tp5 分页样式

1.在tp5框架目录下找到extend文件夹，并创建page文件夹，在page文件夹下中创建Page.php类文件：(下图为tp5框架目录)

2.下面是咱们刚才建立page.php 的内容

<?php
// +----------------------------------------------------------------------
// | Description: 自定义分页
// +----------------------------------------------------------------------
// | Author: phpAndy <383916522@qq.com>
// +----------------------------------------------------------------------

namespace page;

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>";
    }


    //项目
    public function xiangmu()
    {

        return "
        <div class='tablenav-pages'><span class='displaying-num'>" . $this->total . "项目</span>";

    }

    //首页
    public function shouye()
    {
        if ($this->currentPage() > 1) {

            return "
            <a class='next-page' href='" . $this->url(1) . "'>
                            <span class='screen-reader-text'>首页</span>
                            <span aria-hidden='true'><<</span>
             </a>";

        } else {

            return "<span class='pagination-links'><span class='tablenav-pages-navspan' aria-hidden='true'><<</span>";
        }

    }

    //上一页
    public function shangyiye()
    {
        if($this->currentPage() > 1) {
            return "
            <a class='next-page' href='" . $this->url($this->currentPage - 1) . "'>
                            <span class='screen-reader-text'>首页</span>
                            <span aria-hidden='true'><</span>
            </a>";

        }else{
            return "<span class='tablenav-pages-navspan' aria-hidden='true'><</span>";
        }


    }

    //当前页
    public function dangqianye(){

        return "<span class='screen-reader-text'>当前页</span>
                 <span id='table-paging' class='paging-input'>
                 <span class='tablenav-paging-text'>第 $this->currentPage 页，共<span class='total-pages'>  $this->lastPage </span>页</span>
                 </span>";

    }

    //下一页
    public function xiayiye(){



        if ($this->hasMore) {
            return " <a class='next-page' href='".$this->url($this->currentPage + 1)."'>
                            <span class='screen-reader-text'>下一页</span>
                            <span aria-hidden='true'>></span>
                        </a>";
        } else {
            return "<span class='tablenav-pages-navspan' aria-hidden='true'>></span>";
        }

    }

    //尾页
    public function weiye(){

        if ($this->hasMore) {

            return " <a class='next-page' href='". $this->url($this->lastPage) ."'>
                            <span class='screen-reader-text'>尾页</span>
                            <span aria-hidden='true'>>></span>
                        </a>";
            return "<a href='" . $this->url($this->lastPage) . "' title='尾页'>尾页</a>";
        } else {
            return "<span class='tablenav-pages-navspan' aria-hidden='true'>>></span></span>";
        }

    }

    

    /**
     * 页码按钮
     * @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="tablenav-pages">%s %s %s %s %s %s</div>',

                    //css 用于加载下面样式
                    //如果样式是是前端有写好的css样式加载 则不需要加载此处css
                    //$this->css(),
                    $this->xiangmu(),
                    $this->shouye(),
                    $this->shangyiye(),
                    $this->dangqianye(),
                    $this->xiayiye(),
                    $this->weiye()


                    //$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:black;
            }
            .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>';
    }
}

3.然后去修改你的config配置：

    //分页配置
    //这是tp5自带的
   // 'paginate'               => [
   //     'type'      => 'bootstrap',
   //     'var_page'  => 'page',
    //    'list_rows' => 15,
   // ],



    //自定义分页配置
     'paginate'               => [
         //page/Page 指放在extend page文件夹下 的Page类 进行加载
         'type'      => 'page\Page',//分页类
         'var_page'  => 'page',
          'list_rows' => 15,
      ],

4.控制器写法

 public function all_user(){
        $user=new UserModel();
        //分页1
        $paramas=$this->request->param();

        $view=$user->paginate(2);
        //分页2 用来保持分页状态
        $view->appends($paramas);


        $this->assign('view',$view);
        //输出page
        $this->assign('page',$view->render());

        return view();

    }

5.前台页面输出

           <option value="administrator">管理员</option>
                        </select>
                        <input type="submit" name="changeit" id="changeit" class="button" value="更改"></div>

//输出page

                    {$page}


                   

 

6.前台页面效果

 

按照以上方法写 就可以避免tp5自带的分页与网站自带的分页样式不同的问题