Layui使用笔记（二）：tp5+layui实现分页 数据表单的使用 解决接口异常等错误

前言：

前后端分离的事项没由很好的掌握，这部分开发花费了一定的时间，文档以及学习资料查阅的非常零散，因此希望自己可以整理一下.

 

遇到的问题：

分页做不到下面的，经常显示接口异常；

效果图：

 

解决办法：
 

前端：
JS:

layui.use(['table','form'], function() {
        var table = layui.table,form = layui.form, $ = layui.jquery;
        var tableIn = table.render({
        id:'ca',
      elem: '#list'
      ,url:"{:url("category/demo")}"
      , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
       //,curr: 5 //设定初始在第 5 页
      ,limit:5 //一页显示多少条
       ,limits:[5,10,15,30,50]//每页条数的选择项
      ,groups: 1 //只显示 1 个连续页码
      ,first: false //不显示首页
      ,last: false //不显示尾页  
          }
      ,toolbar: '#toolbarDemo'
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,cols: [[
      {type:'checkbox'}
        ,{field:'id', title: 'ID', sort: true}
        ,{field:'name', title: '名称'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
       ,{field:'parent_id', title: '分类', sort: true}
         ,{field:'listorder', title: '排序序号'}
         ,{field:'status', title: '状态',toolbar: '#status'}
         ,{field:'create_time', title: '创建时间', align: 'center',templet:"<div>{{layui.util.toDateString(d.create_time)}}</div>"} //单元格内容水平居中
         ,{field:'update_time', title: '更新时间', sort: true, align: 'right',templet:"<div>{{layui.util.toDateString(d.update_time)}}</div>"}  //单元格内容水平居中
         ,{field:'cate_url',width:150,title:'操作',toolbar:'#action_bar'}
    ]]
  });

 后台TP5部分的Controller:

 //返回数据表数据
    public function demo(){
        $key = input('key');
        /*$key = '北区';*/
        $map = [];
        if($key&&$key!=="")
        {
          $map['name'] = ['like',"%" . $key . "%"];
        }
        /*echo("234");*/
        $page=input("get.page")?input("get.page"):1;
        $page=intval($page);
        $limit=input("get.limit")?input("get.limit"):1;
        $limit=intval($limit);
        $start=$limit*($page-1);
        //分页查询
         $data = [
            'status' => ['neq',2],
           /* 'parent_id' => 0,*/
        ];
        $count=Db::name("category")->count("id");
        $cate_list=Db::name("category")->where($data)->where($map)->limit($start,$limit)->select();
        $list["msg"]="";
        $list["code"]=0;
        $list["count"]=$count;
        $list["data"]=$cate_list;
        if(empty($cate_list)){
            $list["msg"]="暂无数据";
        }
        
        return json($list);
        /*return $categorys;*/
    }

Notes:

 

注意返回的JSON要严格按照规范，不然显示接口异常等错误