广场 › 开发技术 › php+layui数据表格实现数据分页渲染代码

Shun 发表于 2021-11-8 12:16:44

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

今天小编就为大家分享一篇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"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}}" >查看详情</button>
</script>

<script type="text/html" id="hotcake_color">
{{# if (d.hotcake === '超级爆款') { }}
<span>{{ d.hotcake }}</span>
{{# } else if(d.hotcake === '大爆款') { }}
<span>{{ d.hotcake }}</span>
{{# } else if(d.hotcake === '小爆款') { }}
<span>{{ d.hotcake }}</span>
{{# } else if(d.hotcake === '热销款') { }}
<span>{{ d.hotcake }}</span>
{{# } else { }}
<span>{{ 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:
},
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数据表格实现数据分页渲染代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持CodeAE代码之家。
原文链接：https://www.cnblogs.com/yachyu/p/10768252.html

http://www.zzvips.com/article/191884.html

查看完整版本: php+layui数据表格实现数据分页渲染代码