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: