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

2023-08-10 08:28:04 348

一、HTML

二、JS

说明：需要引入layui中的table和laytpl模板引擎，laytpl可以自定义事件及自定义数据字段等








查看详情



{{#if(d.hotcake==='超级爆款'){}}
{{d.hotcake}}
{{#}elseif(d.hotcake==='大爆款'){}}
{{d.hotcake}}
{{#}elseif(d.hotcake==='小爆款'){}}
{{d.hotcake}}
{{#}elseif(d.hotcake==='热销款'){}}
{{d.hotcake}}
{{#}else{}}
{{d.hotcake}}
{{#}}}



layui.use(['form','laydate','layer','table','laytpl'],function(){
varlaydate=layui.laydate;
varlayer=layui.layer;
vartable=layui.table;
varlaytpl=layui.laytpl;

//---SPU数据---------------------------------------------
varspu_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(){
//获取日期的值
vardate=$('#spusearch_date').val();
if(!date){
layer.msg('请选择日期区间搜索',{
time:2000
});
returnfalse;
}

varperfor_val=$('#perfor_val').val();;
varhot_type=$('#hot_type').val();
varartnum=$('#artnum').val();
varcate_id=$('#cate_id').val();

//只选其一条件
if(perfor_val&&hot_type){
layer.msg('业绩区间和爆款类型只选其一',{
time:2000
});
returnfalse;
}

//数据重载
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
}
});

})

})

三、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函数

functionshowpage($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($datasas&$data){
$data['n']=$n;
$n++;
}

$pages['rows']=$datas;

return$pages;
}

以上这篇php+layui数据表格实现数据分页渲染代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐