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的正则处理函数总结分析
Jun 20 PHP
php addslashes 函数详细分析说明
Jun 23 PHP
MayFish PHP的MVC架构的开发框架
Aug 13 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
Aug 21 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
Jan 27 PHP
使用php get_headers 判断URL是否有效的解决办法
Apr 27 PHP
深入eAccelerator与memcached的区别详解
Jun 06 PHP
神盾加密解密教程(一)PHP变量可用字符
May 28 PHP
PHP输入输出流学习笔记
May 12 PHP
PHP 微信扫码支付源代码(推荐)
Nov 03 PHP
PHP异常处理定义与使用方法分析
Jul 25 PHP
PHP getName()函数讲解
Feb 03 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 MYSQL 数据备份类
2009/06/19 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
Python读写ini文件的方法
2015/05/28 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
盛大笔试题
2016/11/05 面试题
校本教研工作方案
2014/01/14 职场文书
七年级英语教学反思
2014/01/15 职场文书
工程建设实施方案
2014/03/14 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
2014年终工作总结范本
2014/12/15 职场文书
特种设备安全管理制度
2015/08/06 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
Python软件包安装的三种常见方法
2022/07/07 Python