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;
}

이상 의 phop+layui 데이터 시트 는 데이터 페이지 렌 더 링 코드 를 실현 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.