layui实现动态和静态数据表分页

2023年6月21日发(作者：)

layui实现动态和静态数据表分页这篇⽂章主要介绍了关于layui实现动态和静态数据表分页，有着⼀定的参考价值，现在分享给⼤家，有需要的朋友可以参考⼀下开发管理后台是每⼀个开发⼈员都要熟悉的⼀个环节，作为后端程序员，公司的所有机密数据都掌握在我们⼿上，所以这个时候，如果不是公司的核⼼成员，是不能接触到某些数据的，这个时候所有的⼯作都落到了我们的⼿上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很⼤程度上减轻了我们的压⼒．今天我们先来学习⼀下layui实现动态数据表，静态数据表，以及表格的分页，其中还涉及到动态刷新数据表,数据表⼯具栏使⽤,表单提交等功能，这个静态分页同样适⽤在信息类⽹站,我的⼯作开发环境是debian桌⾯版，所以所有的实验也是在debian基础上测试layui动态数据表动态数据表的效果图实现过程业务逻辑我都写到注释⾥⾯了，这样⼤家也友好⼀些，避免⼀会看代码，⼀会看说明容易分神前端代码：（头⽂件代码） order_（主体业务代码）import("head"); ?>

注意:为保障访问速度,查询同时请配合时间范围,默认显⽰⼀天以内的记录

商户号

订单号:

发起时间

-

查询 ဂ刷新数据 ဂ刷新页⾯

后端php代码(订单控制器,部分业务代码不⽤太深究）//

订单列表//

订单列表public function orderList(){ //

动态渲染前台表格 $operating = $this->request->getPost('getlist', 'trim'); //

⾸次这⾥不会执⾏，数据表开始渲染的时候才会请求以下部分 if ('orderlist' === $operating) { //

进⾏分页查询 $page = $this->request->getPost('page', 'intval', 1); $limit = $this->request->getPost('limit', 'intval', 10); $start = ($page - 1) * $limit;

//

如果有其他条件查询在这⾥可以带上 $merchant_no = $this->request->getPost('merchant_no', 'trim', ''); $order_no = $this->request->getPost('order_no', 'trim', ''); $start_time = $this->request->getPost('start_time', 'trim', date("Y-m-d H:i:s", strtotime("-1 day"))); $end_time = $this->request->getPost('end_time', 'trim', date("Y-m-d H:i:s"), time());

//

获取符合条件的记录数量 if($GLOBALS['SESSION']['admin_group_id'] >1){ $merchant_no = $GLOBALS['SESSION']['admin_username']; } $order_nums = orders::getItemNums($merchant_no, $order_no, $start_time, $end_time);

//

分页进⾏查询条件记录 $order_list = orders::getItem($merchant_no, $order_no, $start_time, $end_time, $start, $limit); $datas = ['code' => 0, 'msg' => '']; //

将总的记录条数传给前台进⾏渲染分页 $datas['count'] = $order_nums; //

重新过滤⼀遍数据，很多没有⽤到的不能全部发给试图，尤其是动态渲染的，很容易暴露，建议加⼯⼀下再传 foreach ($order_list as $k => $v) { $order_list[$k]['orderno'] = $v['order_id']; $order_list[$k]['user_orderno'] = $v['order_no']; $order_list[$k]['username'] = $v['merchant_no']; $order_list[$k]['pay_type'] = ($v['pay_type'] == 1) ? "⽀付宝扫码" : "微信扫码"; $order_list[$k]['pay_status'] = ($v['callback_status'] > 0) ? "已⽀付" : "未⽀付"; $order_list[$k]['pay_time'] = $v['callback_time']; $order_list[$k]['notice_result'] = ($v['push_status'] > 0) ? "已推送" : "未推送"; } //

将数据通过json格式响应给前台渲染 $datas['data'] = $order_list; echo json_encode($datas); safe_exit(); } //

⾸次先现实模板页 self::$view->render('orders_orderlist');}数据格式请参照官⽅指导：数据接⼝格式,表格模块调试的时候可以打开chrome,firefox 的 console 和 network进⾏查看，仔细研究分析数据表⼯具条事件⼯具栏是指在⾏单元格内可以操作对应的⾏，因为使⽤layui的元素监听，很容易就获取到相应对应整⾏的数据.⽐如获取表单的数据,只需要监听表单提交事件，直接就可以⼀次获取到所有的参数和值：script> (['form','jquery'],function(){ let form = , $ = layui.$; ('submit(fuck-submit)', function(data){ if(rd && < 5){ ('密码不能⼩于５位'); return false; } $.post('?&a=adminEdit&op=update&uid='+,{ username:me, password:rd, level:, is_enabled:_enabled }, function(responseText){ //(responseText); if( === 8){ (,{icon:6}); return false; } else { (,{icon:5}); (); } },'json' ); return false; }); });这是官⽅⽂档('submit(*)', function(data){ () //被执⾏事件的元素DOM对象，⼀般为button对象 () //被执⾏提交的form对象，⼀般在存在form标签时才会返回 () //当前容器的全部表单字段，名值对形式：{name: value} return false; //阻⽌表单跳转。如果需要表单跳转，去掉这段即可。});我们今天要操作的数据表也是要采⽤这种⽅式，⾸先我们看看看怎样⽣成和渲染出⼯具条：只需要在body部分插⼊⼀个容器,注意这⾥的javascript的type是text/html,这个是供layui解析⽤的，在这⾥的d也就是我们在渲染表格的时候的数据,所有的字段的值都可以在这个d⾥⾯获取到

//

这⾥就是我们渲染表格字段的地⽅，和上⾯的容器进⾏绑定，容器⾥⾯可以通过来获取到{fixed: 'right', width:158,title:'操作', align:'center', toolbar: '#barDemo'}然后我们就可以对⼯具条绑定事件了,这⾥我只使⽤了编辑事件('tool(fucktest)', function(obj){ //注：tool是⼯具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = ; //获得当前⾏数据 var layEvent = ; //获得 lay-event

对应的值（也可以是表头的 event

参数对应的值） var tr = ; //获得当前⾏ tr

的DOM对象

if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //删除 m('真的删除⾏么', function(index){ (); //删除对应⾏（tr）的DOM结构，并更新缓存 (index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //

开始根据⽤户id来进⾏获取⽤户进⼊新窗⼝ var index = ({ type: 2, title:'编辑管理员', area: ['700px', '560px'], maxmin: true, content: '?c=adminUser&a=editUser&uid='+_id }); (index);

} })这样在点击编辑之后就能激活对应的事件了，我们这⾥是打开新的⼀个全屏弹窗来修改管理员资料在修改完成后，如果只是单纯的重载数据表可以使⽤我们前⾯使⽤的⽅式，如果是刷新页⾯直接使⽤()//

重载数据表var active = { reload:function(){ var demoReload = $("#demoReload"); var dateReload = $("#dateReload"); ('testReload',{ where:{ username:(), dates:() } }); } }; $("#fresh-btn").click(function(){();}); $("#fresh-page-btn").click(function(){();});这⾥是官⽅的例⼦ toolbar-绑定列⼯具条toolbar 对应的模板，它可以存放在页⾯的任意位置：

注意：属性 lay-event="" 是模板的关键所在，值可随意定义。渲染⼯具条：({ cols: [[ {field:'id', title:'ID', width:100} ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这⾥的toolbar值是模板元素的选择器 ]]});

等价于：ID⼯具条绑定事件：//监听⼯具条('tool(test)', function(obj){ //注：tool是⼯具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = ; //获得当前⾏数据 var layEvent = ; //获得 lay-event

对应的值（也可以是表头的 event

参数对应的值） var tr = ; //获得当前⾏ tr

的DOM对象

if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //删除 m('真的删除⾏么', function(index){ (); //删除对应⾏（tr）的DOM结构，并更新缓存 (index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //do something

//同步更新缓存对应的值 ({ username: '123' ,title: 'xxx' }); }});更加详细的介绍请仔细研读官⽅⽂档 layui table模块静态表格和分页在很多时候在pc端过多的使⽤动态渲染不是⼀个明智的选择，⽐如稍微懂⾏的⼈都能看到你的API和需要的param，所以我们还是建议对安全要求⽐较⾼的程序上还是使⽤静态表格，通过模板引擎也好，还是直接使⽤使⽤后端动态语⾔混合，⽤户最终只能看到解析好的页⾯，对程序保护也是很有必要的，我的⼀个hacker朋友在进⾏渗透的时候都是这样进⾏钻空⼦的静态表格我这⾥直接是使⽤php混合解析进⾏展⽰：前端模板：import('head');?>

注意：此处仅显⽰部分⽇志

$vv):?>

⽇志ID	操作⽤户	操作	控制器	⽅法	是否成功	操作IP	备注信息	⽇期

import('foot');?>这⾥的原理⾮常简单，主要利⽤的是layui下的laypage模块，使⽤jump来触发事件adminLogList⽅法：public function adminLogList() { //

接收当前页，如果没有收到默认是第⼀页 $page = $this->request->getGet('page','intval',1); //

设置limit查找起始，DEFAULT_PER_PAGE为全局变量，设置的是每页显⽰10条 $start = ($page-1)*DEFAULT_PER_PAGE; //

获取总⽇志数量 $adminlog_num = adminLogs::getItemsNumber(); //

分页查找，其他查询条件暂时不传 $admin_log_list = adminLogs::getItems('','','','','',$start); $log_list = array(); foreach($admin_log_list as $kk => $vv){ if($vv['admin_id'] > 0){ try{ $admins = admins::getItemById($vv['admin_id']); $log_list[$kk]['username'] = $admins['username']; } catch (exception2 $e){ logexception($e->format_stack_trace()); } } else { $log_list[$kk]['username'] = 'Tourists'; } $log_list[$kk]['log_id'] = $vv['log_id']; $log_list[$kk]['control'] = $vv['control']; $log_list[$kk]['action'] = $vv['action']; $log_list[$kk]['is_success'] = $vv['is_success'];

$log_list[$kk]['client_ip'] = ip2location($vv['client_ip']); $log_list[$kk]['remark'] = $vv['remark']; $log_list[$kk]['date'] = $vv['date']; $log_list[$kk]['title'] = $vv['title']; unset($admin_log_list[$kk]); } self::$view->setVar('currpage',$page); self::$view->setVar('log_num',$adminlog_num); self::$view->setVar('log_list',$log_list); self::$view->render('default_addloglist'); } }最终效果，已经完成静态分页，此部分功能也适⽤于信息类⽹站：

2023年6月21日发(作者：)

layui实现动态和静态数据表分页这篇⽂章主要介绍了关于layui实现动态和静态数据表分页，有着⼀定的参考价值，现在分享给⼤家，有需要的朋友可以参考⼀下开发管理后台是每⼀个开发⼈员都要熟悉的⼀个环节，作为后端程序员，公司的所有机密数据都掌握在我们⼿上，所以这个时候，如果不是公司的核⼼成员，是不能接触到某些数据的，这个时候所有的⼯作都落到了我们的⼿上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很⼤程度上减轻了我们的压⼒．今天我们先来学习⼀下layui实现动态数据表，静态数据表，以及表格的分页，其中还涉及到动态刷新数据表,数据表⼯具栏使⽤,表单提交等功能，这个静态分页同样适⽤在信息类⽹站,我的⼯作开发环境是debian桌⾯版，所以所有的实验也是在debian基础上测试layui动态数据表动态数据表的效果图实现过程业务逻辑我都写到注释⾥⾯了，这样⼤家也友好⼀些，避免⼀会看代码，⼀会看说明容易分神前端代码：（头⽂件代码） order_（主体业务代码）import("head"); ?>

注意:为保障访问速度,查询同时请配合时间范围,默认显⽰⼀天以内的记录

商户号

订单号:

发起时间

-

查询 ဂ刷新数据 ဂ刷新页⾯

后端php代码(订单控制器,部分业务代码不⽤太深究）//

订单列表//

订单列表public function orderList(){ //

动态渲染前台表格 $operating = $this->request->getPost('getlist', 'trim'); //

⾸次这⾥不会执⾏，数据表开始渲染的时候才会请求以下部分 if ('orderlist' === $operating) { //

进⾏分页查询 $page = $this->request->getPost('page', 'intval', 1); $limit = $this->request->getPost('limit', 'intval', 10); $start = ($page - 1) * $limit;

//

如果有其他条件查询在这⾥可以带上 $merchant_no = $this->request->getPost('merchant_no', 'trim', ''); $order_no = $this->request->getPost('order_no', 'trim', ''); $start_time = $this->request->getPost('start_time', 'trim', date("Y-m-d H:i:s", strtotime("-1 day"))); $end_time = $this->request->getPost('end_time', 'trim', date("Y-m-d H:i:s"), time());

//

获取符合条件的记录数量 if($GLOBALS['SESSION']['admin_group_id'] >1){ $merchant_no = $GLOBALS['SESSION']['admin_username']; } $order_nums = orders::getItemNums($merchant_no, $order_no, $start_time, $end_time);

//

分页进⾏查询条件记录 $order_list = orders::getItem($merchant_no, $order_no, $start_time, $end_time, $start, $limit); $datas = ['code' => 0, 'msg' => '']; //

将总的记录条数传给前台进⾏渲染分页 $datas['count'] = $order_nums; //

重新过滤⼀遍数据，很多没有⽤到的不能全部发给试图，尤其是动态渲染的，很容易暴露，建议加⼯⼀下再传 foreach ($order_list as $k => $v) { $order_list[$k]['orderno'] = $v['order_id']; $order_list[$k]['user_orderno'] = $v['order_no']; $order_list[$k]['username'] = $v['merchant_no']; $order_list[$k]['pay_type'] = ($v['pay_type'] == 1) ? "⽀付宝扫码" : "微信扫码"; $order_list[$k]['pay_status'] = ($v['callback_status'] > 0) ? "已⽀付" : "未⽀付"; $order_list[$k]['pay_time'] = $v['callback_time']; $order_list[$k]['notice_result'] = ($v['push_status'] > 0) ? "已推送" : "未推送"; } //

将数据通过json格式响应给前台渲染 $datas['data'] = $order_list; echo json_encode($datas); safe_exit(); } //

⾸次先现实模板页 self::$view->render('orders_orderlist');}数据格式请参照官⽅指导：数据接⼝格式,表格模块调试的时候可以打开chrome,firefox 的 console 和 network进⾏查看，仔细研究分析数据表⼯具条事件⼯具栏是指在⾏单元格内可以操作对应的⾏，因为使⽤layui的元素监听，很容易就获取到相应对应整⾏的数据.⽐如获取表单的数据,只需要监听表单提交事件，直接就可以⼀次获取到所有的参数和值：script> (['form','jquery'],function(){ let form = , $ = layui.$; ('submit(fuck-submit)', function(data){ if(rd && < 5){ ('密码不能⼩于５位'); return false; } $.post('?&a=adminEdit&op=update&uid='+,{ username:me, password:rd, level:, is_enabled:_enabled }, function(responseText){ //(responseText); if( === 8){ (,{icon:6}); return false; } else { (,{icon:5}); (); } },'json' ); return false; }); });这是官⽅⽂档('submit(*)', function(data){ () //被执⾏事件的元素DOM对象，⼀般为button对象 () //被执⾏提交的form对象，⼀般在存在form标签时才会返回 () //当前容器的全部表单字段，名值对形式：{name: value} return false; //阻⽌表单跳转。如果需要表单跳转，去掉这段即可。});我们今天要操作的数据表也是要采⽤这种⽅式，⾸先我们看看看怎样⽣成和渲染出⼯具条：只需要在body部分插⼊⼀个容器,注意这⾥的javascript的type是text/html,这个是供layui解析⽤的，在这⾥的d也就是我们在渲染表格的时候的数据,所有的字段的值都可以在这个d⾥⾯获取到

//

这⾥就是我们渲染表格字段的地⽅，和上⾯的容器进⾏绑定，容器⾥⾯可以通过来获取到{fixed: 'right', width:158,title:'操作', align:'center', toolbar: '#barDemo'}然后我们就可以对⼯具条绑定事件了,这⾥我只使⽤了编辑事件('tool(fucktest)', function(obj){ //注：tool是⼯具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = ; //获得当前⾏数据 var layEvent = ; //获得 lay-event

对应的值（也可以是表头的 event

参数对应的值） var tr = ; //获得当前⾏ tr

的DOM对象

if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //删除 m('真的删除⾏么', function(index){ (); //删除对应⾏（tr）的DOM结构，并更新缓存 (index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //

开始根据⽤户id来进⾏获取⽤户进⼊新窗⼝ var index = ({ type: 2, title:'编辑管理员', area: ['700px', '560px'], maxmin: true, content: '?c=adminUser&a=editUser&uid='+_id }); (index);

} })这样在点击编辑之后就能激活对应的事件了，我们这⾥是打开新的⼀个全屏弹窗来修改管理员资料在修改完成后，如果只是单纯的重载数据表可以使⽤我们前⾯使⽤的⽅式，如果是刷新页⾯直接使⽤()//

重载数据表var active = { reload:function(){ var demoReload = $("#demoReload"); var dateReload = $("#dateReload"); ('testReload',{ where:{ username:(), dates:() } }); } }; $("#fresh-btn").click(function(){();}); $("#fresh-page-btn").click(function(){();});这⾥是官⽅的例⼦ toolbar-绑定列⼯具条toolbar 对应的模板，它可以存放在页⾯的任意位置：

注意：属性 lay-event="" 是模板的关键所在，值可随意定义。渲染⼯具条：({ cols: [[ {field:'id', title:'ID', width:100} ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这⾥的toolbar值是模板元素的选择器 ]]});

等价于：ID⼯具条绑定事件：//监听⼯具条('tool(test)', function(obj){ //注：tool是⼯具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = ; //获得当前⾏数据 var layEvent = ; //获得 lay-event

对应的值（也可以是表头的 event

参数对应的值） var tr = ; //获得当前⾏ tr

的DOM对象

if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //删除 m('真的删除⾏么', function(index){ (); //删除对应⾏（tr）的DOM结构，并更新缓存 (index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //do something

//同步更新缓存对应的值 ({ username: '123' ,title: 'xxx' }); }});更加详细的介绍请仔细研读官⽅⽂档 layui table模块静态表格和分页在很多时候在pc端过多的使⽤动态渲染不是⼀个明智的选择，⽐如稍微懂⾏的⼈都能看到你的API和需要的param，所以我们还是建议对安全要求⽐较⾼的程序上还是使⽤静态表格，通过模板引擎也好，还是直接使⽤使⽤后端动态语⾔混合，⽤户最终只能看到解析好的页⾯，对程序保护也是很有必要的，我的⼀个hacker朋友在进⾏渗透的时候都是这样进⾏钻空⼦的静态表格我这⾥直接是使⽤php混合解析进⾏展⽰：前端模板：import('head');?>

注意：此处仅显⽰部分⽇志

$vv):?>

⽇志ID	操作⽤户	操作	控制器	⽅法	是否成功	操作IP	备注信息	⽇期

import('foot');?>这⾥的原理⾮常简单，主要利⽤的是layui下的laypage模块，使⽤jump来触发事件adminLogList⽅法：public function adminLogList() { //

接收当前页，如果没有收到默认是第⼀页 $page = $this->request->getGet('page','intval',1); //

设置limit查找起始，DEFAULT_PER_PAGE为全局变量，设置的是每页显⽰10条 $start = ($page-1)*DEFAULT_PER_PAGE; //

获取总⽇志数量 $adminlog_num = adminLogs::getItemsNumber(); //

分页查找，其他查询条件暂时不传 $admin_log_list = adminLogs::getItems('','','','','',$start); $log_list = array(); foreach($admin_log_list as $kk => $vv){ if($vv['admin_id'] > 0){ try{ $admins = admins::getItemById($vv['admin_id']); $log_list[$kk]['username'] = $admins['username']; } catch (exception2 $e){ logexception($e->format_stack_trace()); } } else { $log_list[$kk]['username'] = 'Tourists'; } $log_list[$kk]['log_id'] = $vv['log_id']; $log_list[$kk]['control'] = $vv['control']; $log_list[$kk]['action'] = $vv['action']; $log_list[$kk]['is_success'] = $vv['is_success'];

$log_list[$kk]['client_ip'] = ip2location($vv['client_ip']); $log_list[$kk]['remark'] = $vv['remark']; $log_list[$kk]['date'] = $vv['date']; $log_list[$kk]['title'] = $vv['title']; unset($admin_log_list[$kk]); } self::$view->setVar('currpage',$page); self::$view->setVar('log_num',$adminlog_num); self::$view->setVar('log_list',$log_list); self::$view->render('default_addloglist'); } }最终效果，已经完成静态分页，此部分功能也适⽤于信息类⽹站：