php+layui数据表格实现数据分页渲染代码
时间:2022-07-27
本文章向大家介绍php+layui数据表格实现数据分页渲染代码,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、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数据表格实现数据分页渲染代码就是小编分享给大家的全部内容了,希望能给大家一个参考。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 聊聊dubbo-go的RPCInvocation
- 程序员是怎么记住一堆密码的?
- 腾讯大牛教你MySQL 8.0 PFS histogram解析与优化
- Python __init__.py 作用详解
- Python创建包,导入包
- Python查看模块(变量、函数、类)方法
- Python __doc__属性:查看文档
- Python __file__属性:查看模块的源文件路径
- python第三方库的安装pip的使用与换源
- 表白必备:C语言实现会变色的心
- 人心易变,这段有趣的C代码也一样,来看一下?
- 一个简单但能考察C语言基础的题目,试试?
- 这绝对是C语言的一个经典例题了!
- 你见过最美的C语言代码是什么?
- C语言直接实现开机密码修改!