layui 流加载 + tp5 实例

HTML部分:简单的表格样式,不要嫌弃哈

<div class="flow-default" id="handle_demo"> <!--此id为流加载应用范围标识-->
    <table>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>img</th>
            <th>sex</th>
        </tr>

    </table>
</div>

JS部分:ajax请求后台数据,并对数据进行处理拼接

<script src="/static/layui-v2.4.5/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('flow', function(){
        var flow = layui.flow;
        var $ = layui.jquery;

        //手动点击加载下一页
        flow.load({
            elem: '#handle_demo' //流加载容器
            ,scrollElem: '#handle_demo' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,isAuto: false     //自动加载  为true的时候是自动加载
            ,isLazyimg: true   //图片懒加载
            ,done: function(page, next){ //加载下一页
//                console.log(page);  //默认为1
                $.get(
                        "{:url('test/back')}",
                        {page:page},
                        function(d){
//                            console.log(d);
                            var lis = [];
                            layui.each(d.res, function(index, item){  //遍历后台传过来的数据
                                lis.push("<tr><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.age+"</td><td><img src='"+item.pix+"' /></td><td>"+item.sex+"</td></tr>");  //作为元素塞进数组lis中
                            });
                            next(lis.join(''),page < d.total_page);  //拼接成字符串
                        }
                );
            }
        });
 });

PHP部分:查询分页导出数据表记录以及返回总页数 json格式

public function back(Request $request){
        $page_size = 5;  //每页显示条数
        $count = Db::name('liu')->count();  //总记录数
        $data['total_page'] = ceil($count/$page_size);  //总页数
        $cur_page = intval($request->param('page'))-1;  //默认前端page传过来为1 
        $data['res'] = Db::name('liu')
            ->limit(($cur_page*$page_size),$page_size)  //limit默认要从零开始
            ->select();
//        dump(Db::name('liu')->getLastSql());die;
        return json($data);  //返回json
    }

效果图:

点击下一页效果:

自己马克一下,tkzzz

layui 流加载 + tp5 实例

猜你喜欢