天天看點

tp5.1 layui 資料表格 頁籤 同個内容框顯示不同的資料清單

項目用tp5.1 + layui 資料表格

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>
           

重點:

tp5.1 layui 資料表格 頁籤 同個内容框顯示不同的資料清單

控制器代碼:

//待上課表/已上課表
    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;  
}