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

发布:smiling　来源: PHP粉丝网　添加日期：2022-01-18 22:02:26　浏览: 评论：0　

今天小编就为大家分享一篇php+layui数据表格实现数据分页渲染代码，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧。

一、HTML

二、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;

}