温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何在php中利用layui数据表格实现一个数据分页渲染功能

发布时间:2021-02-17 11:05:31 阅读:366 作者:Leah 栏目:开发技术
PHP开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

如何在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 >{{ 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
  height800,
  url'__URL__/spu_data', //后台接口
  toolbartrue,
  loadingtrue,
  text: {
   none'空空如也'
  },
  title'spu数据',
  size'sm',
  page: {
   layout: ['count''prev''page''next''limit''refresh''skip'],
   limit20,
   limits: [20,30,50,100,200,5000]
  },
  cols: [[
    {field:'n', title'i', width55},
    {field:'', title'图', width31, templet'#pimg'},     // templet 引用laytpl中的自定义模板
    {field:'', title'查看详情', width120, templet'#spu_detail'},  // 引用laytpl中的自定义模板
    {field:'artnum', title'货号', sorttrue},
    {field:'gcolor', title'颜色组', sorttrue},
    {field:'cate', title'品类', sorttrue},
    {field:'price', title'业绩', sorttrue},
    {field:'sales', title'销量', sorttrue},
    {field:'hotcake', title'热销程度', templet'#hotcake_color', sorttrue},
    {field:'sumcost', title'商品成本', sorttrue}
  ]]
 });

// 搜索重载数据
 $('#spudata_search').click(function(){
  // 获取日期的值
  var date = $('#spusearch_date').val();
  if (!date) {
   layer.msg('请选择日期区间搜索', {
    time2000
   });
   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('业绩区间和爆款类型只选其一', {
    time2000
   });
   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'],
    curr1
   }
  });

 })

}) 
</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数据表格实现一个数据分页渲染功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×