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数据表格实现数据分页渲染代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持免费资源网。