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 XPath对XML文件查找及修改实现代码
Jul 27 PHP
理解和运用PHP中的多态性[译]
Aug 02 PHP
初步介绍PHP扩展开发经验分享
Sep 06 PHP
PHP文章按日期(月日)SQL归档语句
Nov 29 PHP
让PHP显示Facebook的粉丝数量方法
Jan 08 PHP
php使用CURL伪造IP和来源实例详解
Jan 15 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
May 12 PHP
PHP获取数组最大值下标的方法
May 12 PHP
Discuz!X中SESSION机制实例详解
Sep 23 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
Nov 05 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
Dec 18 PHP
YII2框架使用控制台命令的方法分析
Mar 18 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
关于crontab的使用详解
2013/06/24 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
详解Python中的join()函数的用法
2015/04/07 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
打造完美自荐信
2014/01/24 职场文书
公务员转正考察材料
2014/02/07 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
比赛主持人开场白
2015/05/29 职场文书
通讯稿范文
2015/07/22 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android