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在多维数组中根据键名快速查询其父键以及父键值的代码
May 07 PHP
php使用curl检测网页是否被百度收录的示例分享
Jan 31 PHP
php环境套包 dedeampz 伪静态设置示例
Mar 26 PHP
PHP入门之常量简介和系统常量
May 12 PHP
php的ZipArchive类用法实例
Oct 20 PHP
php实现根据词频生成tag云的方法
Apr 17 PHP
PHP开发中AJAX技术的简单应用
Dec 11 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
Oct 17 PHP
php 三元运算符实例详细介绍
Dec 15 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
Apr 01 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
Jun 17 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
Dec 25 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中file_exists函数使用详解
2015/05/08 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
python使用range函数计算一组数和的方法
2015/05/07 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
MySQL视图概念以及相关应用
2022/04/19 MySQL