thinkphp5.1+layui應用分頁

以往用原生時，若要在項目上使用分頁，后端代碼經常要一整頁，現在使用thinkphp之后才發現曾經復雜的后端代碼簡單到了極致，直接用官方提供的 paginate() 方法就可以很簡單的實現了，廢話少說，接下來用代碼實現一個完整的電腦端分頁功能。

首先，引入layui文件（我這里是放在public里面的web_static文件夾下，並全局使用，建議新手也全局使用，不然可能要寫很多兼容樣式，之前寫一個站的兼容的時候真的太痛苦了）

    <link rel="stylesheet" href="/web_static/layui/css/layui.css"/>

 

接下來是html頁面

 <div style="width: 1200px;margin: 0 auto;">
            <div>
                <div id="allGuests" style="display: flex;flex-direction: row;flex-wrap: wrap">
                  {foreach $list['data'] as $key => $vo }
                    <div style="width: 30%;margin: 20px;box-sizing: border-box;border: 1px solid #e2e2e2;border-radius: 10px;overflow: hidden;">
                      <a  href="{:url('/web/demo_content','detail='.$vo['id'])}">
                        <img style="width: 100%;height: 300px;object-fit: cover;" src="https://www.xinhuang.net.cn/{$vo.img}">
                        <div style="text-align: center;font-size: 18px;line-height: 50px;">{$vo.name}</div>
                      </a>
                    </div>
                  {/foreach}
                </div>
                <!--分頁-->
                <div style="width:1200px;text-align:center;margin: 0 auto;">
                    <div id="paging" class="paging" style="background-color: transparent;"></div>
                </div>
            </div>
        </div>

上面foreach內的內容是要循環的數據，因為下面會用到，所以先說明。

 

然后就是js部分了（這里和上面的html是寫在同一頁面的，js要分開的同學需要自己處理一下），$list表示獲取到的后端數據，下方forEach內的內容與上面foreach內的內容一樣，但是轉成了js可以輸出的形式，tp的模板也跟着做了一些變化

<script>
    layui.use('laypage', function () {
        var laypage = layui.laypage;

        //執行一個laypage實例
        laypage.render({
            elem: 'paging' //注意，這里的 test1 是 ID，不用加 # 號
            , count: '{$list["total"]}'
            , limit: 10
            , curr: '{$list.current_page}'
            , layout: ['count', 'prev', 'page', 'next', 'skip']
            , theme: 'pageClass' //生成一個類名為layui-laypage-pageClass的類，方便使用css對其進行樣式修改
            , jump: function (obj, first) {

                console.log(obj.curr); //得到當前頁，以便向服務端請求對應頁的數據。
                console.log(obj.limit); //得到每頁顯示的條數

                if (!first) {

                    axios.get('demo/list', {params: {page: obj.curr}}).then(function (res) { //demo/list為處理分頁的PHP文件路由路徑

                        let html = '';

                        res.data.data.forEach((v) => {

                            html += '<div style="width: 30%;margin: 20px;box-sizing: border-box;border: 1px solid #e2e2e2;border-radius: 10px;overflow: hidden;"> <a  href="{:url("/web/demo_content","","")}/detail/' + v.id + '.html"> <img style="width: 100%;height: 300px;object-fit: cover;" src="https://www.xinhuang.net.cn/'+v.img+'"> <div style="text-align: center;font-size: 18px;line-height: 50px;">'+v.name+'</div> </a> </div>'

                    });

                        document.getElementById('allGuests').innerHTML = html;

                        var newUrl = "{:url('/web/demo')}?page=" + obj.curr;

                        var stateObject = 0;
                        var title = "0";
                        history.replaceState(stateObject, title, newUrl);
                        document.documentElement.scrollTop = 655;
                        document.body.scrollTop = 655;


                    });

                }

            }
        });
    });
</script>

 

接下來就是后端了，在寫后端之前先給大家貼一下我定義的路由，免得等下大家找不到對應的方法

Route::get('web/demo','index/demo/demo'); //主頁面
Route::get('web/demo/list','index/demo/demoList'); //分頁

 

thinkphp部分

controller控制器（$page為起始頁，$pageSize為每頁最多數據條數，$pageSize的值應與js中limit的值相同）

 public function demo($page = 1, $pageSize = 10)
    {
        $Demo = DemoModel::getDemo($page, $pageSize);
        
        $this->assign('list', $Demo);return $this->fetch();

    }

    //分頁一部分
    public function demoList($page = 1, $pageSize = 10)
    {

        $Demo = DemoModel::getDemo($page, $pageSize);

        return json($Demo);

    }

 

model模型

    public static function getDemo($page, $pageSize)
    {



        $result = self::paginate($pageSize, null, ['page' => $page])->toArray();



//        $result = self::order(array('px'=>'desc','id'=>'desc'))->select();

        return $result;

    }

 

到這里，這個分頁功能就做好了，但用的是layui的默認樣式，如果要修改的話可以自定義css，以下貼上本人修改的樣式供大家參考，其中的 layui-laypage-pageClass 類名是在上面的js里面的theme中定義的，不知道出處的可以上去上面的js里面找一下

    .layui-laypage-pageClass span{
        background-color: transparent;
    }

    .layui-laypage-pageClass .layui-laypage-count{
        font-size: 16px;
    }

    .layui-laypage-pageClass .layui-laypage-curr{
        background-color: #c79f62;
        padding: 5px 20px;
    }

    .layui-laypage-pageClass .layui-laypage-curr .layui-laypage-em{
        background-color: #c79f62;
    }

    .layui-laypage-pageClass .layui-laypage-curr em{
        font-size: 16px;
    }

    .layui-laypage-pageClass a{
        font-size: 16px;
        padding: 5px 20px;
    }

    .layui-laypage-pageClass .layui-laypage-skip{
        font-size: 16px;
    }

    .layui-laypage-pageClass .layui-input{
        width: 70px;
        height: 40px;
        margin-top: -5px;
    }

    .layui-laypage-pageClass .layui-laypage-btn{
        width: 70px;
        height: 40px;
        margin-top: -5px;
    }

 

好了，這樣就修改完成了，以下是最終效果， 數據也是會跟着變化的，這里不便展示，先和大家說一聲

 

 

 

附上thinkphp和layui的分頁鏈接

thinkphp：https://www.kancloud.cn/manual/thinkphp5_1/354120

layui：https://www.layui.com/doc/modules/laypage.html