// model 獲取分頁數據
class Test extends Model{
/**
*page 起始頁 limit 每頁的條數 ($page -1) *$limit 第幾條數據開始查詢
*
*
*/
public function paginate($limit = 10, $page = 1, $arr = [])
{
return self::where($arr)->limit(($page -1) *$limit, $limit)->select();
}
}
controller 處理數據
public function index()
{
if (input('get.key')) { // 判斷是否是layui 接口請求數據
$count,= count(\app\admin\model\Test::all());
$arr =(new \app\admin\model\Test())->paginate(input("get.limit"),input("get.page"));
return json(['code' => $code, "msg" => $msg, 'count' => $count, 'data' => $arr]);
} else {
return view();
}
index.html 頁面實現
layui.use(['table','form'], function(){
var table = layui.table,
form =layui.form;
table.render({
elem: '#test'
,url:"{:url('Test/index')}" // 接口請求地址
,where: {key: 'get'} //如果無需傳遞額外參數，可不加該參數 ，我是用來判斷是否是layui 請求參數的標誌
,method: 'get' //如果無需自定義HTTP類型，可不加該參數
,toolbar: '#toolbarDemo' //開啓頭部工具欄，併爲其綁定左側模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定義頭部工具欄右側圖標。如無需自定義，去除該參數即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '品牌數據表'
,page: true
,height: 'full-150'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'brand_name', title:'品牌名稱', width:120, edit: 'text'}
,{field:'brand_logo', title:'品牌LOGO', width:150, templet: function(res){
return '<img src="' + res.brand_logo +'">'
}}
,{field:'brand_url', title:'品牌網址', width:230, edit: 'text'}
,{field:'brand_desc', title:'品牌描述', width:200,edit: 'text'}
,{field:'status', title:'狀態', minWidth : 120, templet: '#switchStatus', unresize : true}
,{field:'create_time', title:'加入時間', width:120, sort: true}
,{field:'update_time', title:'最後變更時間', width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
//頭工具欄事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
console.log(data[0]);
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('選中了：'+ data.length + ' 個');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全選': '未全選');
break;
//自定義頭工具欄右側圖標 - 提示
case 'LAYTABLE_TIPS':
layer.alert('這是工具欄右側自定義的一個圖標按鈕');
break;
};
});
//監聽單元格編輯
table.on('edit(test)', function(obj){
var value = obj.value //得到修改後的值
,data = obj.data //得到所在行所有鍵值
,field = obj.field; //得到字段
$.ajax({
type: 'POST',
url: "{:url('Brand/edit')}?key=cell",//修改單元格並向後臺發送請求
data: {id:data.id,field:field,value:value},
dataType : "json",
success: function(result) {
console.log(result);
//發異步，把數據提交給php
if (result.code ==1) {
layer.msg(result.msg, {
icon: 6,time:2000
},
function() {
//關閉當前frame
xadmin.close();
// 可以對父窗口進行刷新
xadmin.father_reload();
});
}else{
layer.msg(result.msg + result.msg, {
icon: 2,time:2000
});
}
}
});
});
//監聽行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
console.log(data)
if(obj.event === 'del'){
layer.confirm('確定刪除嗎？', {icon: 3, title:'提示'}, function(index){
$.ajax({
type: 'POST',
url: "{:url('Brand/del')}?key=del",//發送請求
data: {id:data.id},
dataType : "json",
success: function(result) {
console.log(result);
//發異步，把數據提交給php
if (result.code ==1) {
layer.msg(result.msg, {
icon: 6,time:2000
},
function() {
obj.del();
layer.close(index);
});
}else{
layer.msg(result.msg + result.msg, {
icon: 2,time:2000
});
}
}
});
});
} else if(obj.event === 'edit'){
console.log(data)
xadmin.open('在tab打開刷新','{:url("Brand/edit")}?id='+data.id);
}
});
//監聽提交
form.on('switch(switchStatus)', function (data) {
var id = data.value; //開關id 值，也可以通過data.elem.value得到
var status=data.elem.checked==true?1:0;
$.ajax({
type: 'POST',
url: "{:url('Brand/edit')}?key=switch",//發送請求
data: {id:id,status:status},
dataType : "json",
success: function(result) {
console.log(result);
//發異步，把數據提交給php
if (result.code ==1) {
layer.msg(result.msg, {
icon: 6,time:2000
});
}else{
layer.msg(result.msg, {
icon: 2,time:2000
});
}
}
});
return false;
});
});
以上就是layui -table 請求的簡單實現，就是這樣就可以分頁，要注意layui-table 每一次分頁請求都有 limit 、page兩個 參數，後臺接收參數並獲取數據庫的數據就行，其他的就交給layui-table渲染就行
