項目用tp5.1 + layui 資料表格
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNvwVZ2x2bzNXak9CX90TQNNkRrFlQKBTSvwFbslmZvwFMwQzLcVmepNHdu9mZvwFVywUNMZTY18CX052bm9CX90TQPJTWE1kdKdVYohmMMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2LcRHelR3LcJzLctmch1mclRXY39TNxgTOyITNwEDOygDM4EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
模闆代碼:
<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;
}