php+layui数据表格实现数据分页渲染代码


Posted in PHP onOctober 26, 2019

一、HTML

<table class="layui-hide layui-table" id="spu-data"></table>

二、JS

说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等

<!-- 拼接图片 -->
<script type="text/html" id="pimg">
 <img class="img" onmouseover="divIn(event)" onmouseout="divOut(event)" onmousemove="divIn(event)" src="__PUBLIC__/{{d.pimgurl}}t_{{d.pimgname}}" alt="">
</script>

<!-- 查看详情按钮 -->
<script type="text/html" id="spu_detail">
 <button class="layui-btn layui-btn-xs layui-btn-primary spu_detail" artnum="{{d.artnum}}" value="{{d.basic_id}}" onclick="spuDetail(event)">查看详情</button>
</script>

<script type="text/html" id="hotcake_color">
 {{# if (d.hotcake === '超级爆款') { }} 
  <span style="display: block;background-color: #CCFFCC;">{{ d.hotcake }}</span>
 {{# } else if(d.hotcake === '大爆款') { }} 
  <span style="display: block;background-color: #99CCCC;">{{ d.hotcake }}</span> 
 {{# } else if(d.hotcake === '小爆款') { }} 
  <span style="display: block;background-color: #FFCCCC;">{{ d.hotcake }}</span> 
 {{# } else if(d.hotcake === '热销款') { }} 
  <span style="display: block;background-color: #FFFFCC;">{{ d.hotcake }}</span> 
 {{# } else { }} 
  <span style="display: block;background-color: #CCFFFF;">{{ d.hotcake }}</span> 
 {{# } }} 
</script>
<script type="text/javascript">

layui.use(['form','laydate','layer','table','laytpl'],function(){
 var laydate = layui.laydate;
 var layer = layui.layer;
 var table = layui.table;
 var laytpl = layui.laytpl;

//---SPU数据---------------------------------------------
 var spu_table = table.render({
  elem: '#spu-data', //html中table窗口的id
  height: 800,
  url: '__URL__/spu_data', //后台接口
  toolbar: true,
  loading: true,
  text: {
   none: '空空如也'
  },
  title: 'spu数据',
  size: 'sm',
  page: {
   layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
   limit: 20,
   limits: [20,30,50,100,200,5000]
  },
  cols: [[
    {field:'n', title: 'i', width: 55},
    {field:'', title: '图', width: 31, templet: '#pimg'},     // templet 引用laytpl中的自定义模板
    {field:'', title: '查看详情', width: 120, templet: '#spu_detail'},  // 引用laytpl中的自定义模板
    {field:'artnum', title: '货号', sort: true},
    {field:'gcolor', title: '颜色组', sort: true},
    {field:'cate', title: '品类', sort: true},
    {field:'price', title: '业绩', sort: true},
    {field:'sales', title: '销量', sort: true},
    {field:'hotcake', title: '热销程度', templet: '#hotcake_color', sort: true},
    {field:'sumcost', title: '商品成本', sort: true}
  ]]
 });

// 搜索重载数据
 $('#spudata_search').click(function(){
  // 获取日期的值
  var date = $('#spusearch_date').val();
  if (!date) {
   layer.msg('请选择日期区间搜索', {
    time: 2000
   });
   return false;
  }

  var perfor_val = $('#perfor_val').val();;
  var hot_type = $('#hot_type').val();
  var artnum = $('#artnum').val();
  var cate_id = $('#cate_id').val();

  // 只选其一条件
  if (perfor_val && hot_type) {
   layer.msg('业绩区间和爆款类型只选其一', {
    time: 2000
   });
   return false;
  }

  // 数据重载
  spu_table.reload({
   // 发送条件
   where: {
    artnum: artnum,
    perfor_val: perfor_val,
    hot_type: hot_type,
    cate_id: cate_id,
    date: date,
    act: 'reload'
   },
   page: {
    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
    curr: 1
   }
  });

 })

}) 
</script>

三、PHP

#这里是PHP类中主要的配合步骤

# 接收layui发送的limit
if (trim($_GET['limit'])) {
 $limit = trim($_GET['limit']);
}else{
 $limit = 15;
}

# 按某字段排序,$rows为数据数组
$sort_num = array_column($rows,'num');
array_multisort($sort_num,SORT_DESC,$rows, SORT_DESC);

# 调用自定义分页函数
$datas = array();
$datas = showpage($rows,$limit);

$items = array();

# 返回layui数据格式
$items['data'] = $datas['rows'];
$items['code'] = 0;
$items['msg'] = 'ok';
$items['count'] = $datas['tot'];

exit(json_encode($items));
# showpage函数

function showpage($rows,$count){ 
 $tot = count($rows); // 总数据条数

 if ($_GET['page']) { //获取当前页码
  $page = $_GET['page'];
 }else{
  $page = 1;
 }

 // $count = $count; # 每页显示条数

 $countpage = ceil($tot/$count); # 计算总共页数

 $start = ($page-1)*$count; # 计算每页开始位置

 $datas = array_slice($rows, $start, $count); # 计算当前页数据

 # 获取上一页和下一页
 if ($page > 1) {
  $uppage = $page-1;
 }else{
  $uppage = 1;
 }

 if ($page < $countpage) {
  $nextpage = $page+1;
 }else{
  $nextpage = $countpage;
 }

 $pages['countpage'] = $countpage;
 $pages['page'] = $page;
 $pages['uppage'] = $uppage;
 $pages['nextpage'] = $nextpage;
 $pages['tot'] = $tot;

 //循环加入序号 , 避免使用$i引起的序号跳位
 $n = 1;
 foreach ($datas as &$data) {
  $data['n'] = $n;
  $n++;
 }
 
 $pages['rows'] = $datas;

 return $pages;
}

以上这篇php+layui数据表格实现数据分页渲染代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
如何在PHP中使用Oracle数据库(3)
Oct 09 PHP
PHP 伪静态技术原理以及突破原理实现介绍
Jul 12 PHP
php求正负数数组中连续元素最大值示例
Apr 11 PHP
PHP文件缓存类示例分享
Jan 30 PHP
PHP数组函数知识汇总
May 12 PHP
thinkphp3.x中display方法及show方法的用法实例
May 19 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
Jun 30 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
May 23 PHP
Laravel框架中Blade模板的用法示例
Aug 30 PHP
php中青蛙跳台阶的问题解决方法
Oct 14 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
Mar 07 PHP
PHP实现简单的计算器
Aug 28 PHP
layui数据表格自定义每页条数limit设置
Oct 26 #PHP
在 Laravel 中动态隐藏 API 字段的方法
Oct 25 #PHP
Laravel 实现添加多语言提示信息
Oct 25 #PHP
Laravel5.5 动态切换多语言的操作方式
Oct 25 #PHP
解决php扩展安装不生效问题
Oct 25 #PHP
Laravel实现通过blade模板引擎渲染视图
Oct 25 #PHP
laravel 解决Validator使用中出现的问题
Oct 25 #PHP
You might like
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python提取频域特征知识点浅析
2019/03/04 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python如何从文件读取数据及解析
2019/09/19 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
python基础之类属性和实例属性
2021/10/24 Python