Laravel自带分页&layui数据表格做分页

最新推荐文章于 2024-07-09 23:16:53 发布

qq_42728930

最新推荐文章于 2024-07-09 23:16:53 发布

阅读量2.2k

点赞数

文章标签： Laravel Layui 分页

本文链接：https://blog.csdn.net/qq_42728930/article/details/98218109

版权

Laravel自带分页&layui数据表格做分页

Laravel自带分页
Layui数据表格做分页

Laravel自带分页

首先放上Laravel自带的分页代码。

控制器代码：

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Support\Facades\DB;
use App\Http\Controllers\Controller;
 
class UserController extends Controller
{
    /**
     * 显示应用中的所有用户
     *
     * @return Response
     */
    public function index()
    {
        $users = DB::table('users')->paginate(15);
        return view('user.index', ['users' => $users]);
    }
}

表单代码：

<div class="container">
    @foreach ($users as $user)
        {{ $user->name }}
    @endforeach
</div>
{{ $users->links() }}

如果你的链接想传递参数，加如下代码

{{ $users->appends(['sort' => 'votes'])->links() }}

Layui数据表格做分页

如果一个页面上有多个表格，并且只需要一个做分页，这时候用laravel自带的分页就会出现换也发生刷新整个页面的问题，刷新之后还得定位到分页的位置，这时候用layui的数据表格分页就会局部刷新。

控制器代码：
layui数据表格，需要接口返回数据详情见layui数据表格文档

public function get_user_action($user_id,$limit,$page){
        $offset = ($page - 1) * $limit;
        $action=$this->model
            ->where('uid','=',$user_id)
            ->orderBy('add_time','desc')
            ->offset($offset)
            ->paginate($limit);
        $count=count($this->model->where('uid','=',$user_id)->orderBy('add_time','desc')->get());
        foreach ($action as $K=>&$V){
            if($V){
                if($V->action=='购买'){
                    $course_name=DB::table('course')->where('course_id','=',$V['course_id'])->value('course_title');
                    $V['action']='购买'.'《'.$course_name.'》';
                }
            }
            if($V){
                if($V->action=='下单'){
                    $course_name=DB::table('course')->where('course_id','=',$V['course_id'])->value('course_title');
                    $V['action']='下单'.'《'.$course_name.'》';
                }
            }
            if($V){
                if($V->action=='浏览'){
                    $course_name=DB::table('course')->where('course_id','=',$V['course_id'])->value('course_title');
                    $V['action']='浏览'.'《'.$course_name.'》';
                }
            }

        }
        $data=$action->toArray();
        $res['data']=$data['data'];
        $res['count']=$count;
        return $res;
    }
   }

表单代码：

<body>
        <table id="demo" lay-filter="test"></table>
</body>
         <script>
                layui.use('table', function(){
                    var table = layui.table;

                    //第一个实例
                    table.render({
                        elem: '#demo'
                        // ,height: 312
                        , demo: '#demo'
                        ,url: '/fllow_action_data' //数据接口
                        ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                            //,curr: 5 //设定初始在第 5 页
                            ,groups: 1 //只显示 1 个连续页码
                            ,first: false //不显示首页
                            ,last: false //不显示尾页
                        }
                        ,cols: [[ //表头
                            {field: 'action', title: '用户行为' }
                            ,{field: 'url', title: '链接'}
                            ,{field: 'device', title: '设备'}
                            ,{field: 'browser', title: '浏览器'}
                            ,{field: 'uid', title: '学号'}
                            ,{field: 'add_time', title: '添加时间'}
                        ]]
                        , response: {
                            statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                        }
                        ,where: {user_id: $('#user_id').val()}
                        , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                            return {
                                "code": res.code, //解析接口状态
                                "msg": res.msg, //解析提示文本
                                "data": res.data, //解析数据列表
                                "count": res.count //解析数据列表
                            };
                        }
                    });
                });
            </script>

layui数据表格同样可以追加参数：

     ,where: {user_id: $('#user_id').val()}

qq_42728930

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫