基于thinkphp5+layui-table实现分页
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;
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'
}]
,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}
]]
});
/
/头⼯具栏事件
<('toolbar(test)', function(obj){
var checkStatus = table.fig.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;
};
});
/
/监听单元格编辑
<('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 (de ==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
});
}
}
});
});
//监听⾏⼯具事件
<('tool(test)', function(obj){
<('tool(test)', function(obj){
var data = obj.data;
console.log(data)
if(obj.event === 'del'){
type: 'POST',
url: "{:url('Brand/del')}?key=del",//发送请求
data: {id:data.id},
dataType : "json",
success: function(result) {
console.log(result);
//发异步，把数据提交给php
if (de ==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);
}
});
//监听提交
<('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 (de ==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渲染就⾏
密特朗
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议