Layui实现分页展示

1.前端页面：
先引入必要的layui.js和css文件。可去官网下载：真不叫郭浩天

这里建议引入本地文件

1.前端代码

 <!DOCTYPE html>
 <html>
 <head>
     <!--素人郭-->
     <meta charset="utf-8">
     <title>Layui</title>
     <meta name="renderer" content="webkit">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <!-- 引入 layui.css -->
     <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
 </head>
 <body>
 
 <table class="layui-hide" id="test"></table>
 <script type="text/html" id="barDemo">
     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>
 <!-- 引入 layui.js -->
 <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
 <script>
     layui.use('table', function(){
         var table = layui.table;
 
         table.render({
             elem: '#test'
             ,url:"{:url('/show')}"
             ,cols: [[
                 {field:'id', width:80, title: 'ID', sort: true}
                 ,{field:'goods_name', width:200, title: '商品名'}
                 ,{field:'goods_price', width:200, title: '商品单价', sort: true}
                 ,{field:'spec_value_names', width:200, title: '商品介绍'}
                 ,{field:'create_time', title: '添加时间', minWidth: 150}
                 ,{fixed: 'right', width:178, align:'center', title: '操作', toolbar: '#barDemo'}
            ]]
             ,page: true
             ,limit:5
        });
     });
 </script>
 
 </body>
 </html>



2.后台


在tp5 Controller层需要通过Mode实例化对象连接数据库查询表中的数据

 public function show(){
     if (request()->isAjax()){
         //接收前台 limit 传过来的参数
         $page = input('limit');
         //调用模型层
         $data = \app\admin\model\Show::getShow($page);
         //查询出总条数
         $sum = $data->total();
         //转为二维数组
         $data = $data->getCollection()->toArray();
         //返回json格式 切记 code=0
         $json = [
             'code'=>0,
             'msg'=>"",
             'data'=>$data,
             'count'=>$sum
         ];
         return $json;
     }
     return view('login/show');
 }



3.模型层

 protected $table = 'pyg_order_goods';
 public static function getShow($page){
     return self::order('id desc')->paginate($page);
 }

posted on 2021-08-06 10:52 二十一年春阅读(769) 评论(0) 收藏举报