tp5.1 layui 数据表格 选项卡 同个内容框显示不同的数据列表

Posted 2022-07-20 Q神

项目用tp5.1 + layui 数据表格

模板代码：

<table id="demo" lay-filter="demo"></table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a lay-event="edit"  class="layui-btn layui-btn-xs" >编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script> 
<script>
layui.use([form,element,table,jquery], function()
  var form = layui.form
  ,element = layui.element
  ,table = layui.table
  ,$= layui.$;
 
 //第一个实例
 var show_test = function(_type)
  alert(_type)

  table.render(
    elem: #demo
    ,url: :url(course_dotable) //数据接口
    ,where: uid: $uid, flid: 2,type:_type
    ,page: true
    ,id: idTest
    ,limits: [10,20,30,60,90,150,300]
    ,limit: 10 //默认采用60
      ,cols: [[ //表头
          checkbox: true,fixed:left
         ,type:numbers, title: 序号,width:60,fixed:left
         ,field: id, title: ID, width:80, sort: true
         ,field: title, title: 标题
         ,field: starttime, title: 开始时间, width:180
         ,field: endtime, title: 结束时间, width:180
         ,fixed: right, title: 操作,width:210, align:center, toolbar: #barDemo
      ]]
    ,initSort: 
       field: id //排序字段，对应 cols 设定的各字段名
      ,type: desc //排序方式  asc: 升序、desc: 降序、null: 默认排序
      
    ,request: 
      pageName: page //页码的参数名称，默认：page
       ,limitName: limit //每页数据量的参数名，默认：limit
             
    ,done: function(res, page, count)
      //如果是异步请求数据方式，res即为你接口返回的信息。
      //如果是直接赋值的方式，res即为：data: [], count: 99 data为当前页数据、count为数据总长度
      //console.log(res);
    
      //得到当前页码
      //console.log(page); 
      //console.log(limit); 
      //得到数据总量
      //console.log(count);
   
  );
  
   
 
 show_test(1);
  
  //监听Tab切换，以改变地址hash值
  element.on(tab(test1), function()
    show_test(this.getAttribute(lay-id));
     
//  location.hash = type=+ this.getAttribute(lay-id);
//  consol.log(this.getAttribute(lay-id))
  );


);
</script>

重点：

控制器代码：

//待上课表/已上课表
    public function course_dotable()
        
        $uid=input(uid);
        $limit=input(limit);
        $page=input(page);//页数
        //$limit=$limit?$limit:10;
        $type=input(type);//搜索分类
        $key=input(key);//搜索关键词
        //$this->assign(limit,$limit);
        


        //$rs=Db::name(live_course)->where($where)->order([id=>desc])->paginate($limit,false,[query => request()->param()]);
        $rs=Db::name(live_course)->order(id desc)->limit($limit)->page($page)->select();
        $rs1=Db::name(live_course)->select();

        $count = count($rs1);//取得记录集总条数
        json(0,数据返回成功,$count,$rs); 
        
        
        //$page = $rs->render();         
        //$this->assign(page, $page);

        
        
    

公共函数

function json($code,$msg="",$count,$data=array())  
            $result=array(  
              code=>$code,  
              msg=>$msg, 
        count=>$count,  
              data=>$data   
            );  
            //输出json  
            echo json_encode($result);  
            exit;