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