php+layui數據表格實現數據分頁渲染代碼

 更新時間:2019年10月26日 10:13:26   作者:yach_yu   我要評論
今天小編就為大家分享一篇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數據表格實現數據分頁渲染代碼就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • 定位地理位置PHP判斷員工打卡簽到經緯度是否在打卡之內

    定位地理位置PHP判斷員工打卡簽到經緯度是否在打卡之內

    這篇文章主要介紹了定位地理位置PHP判斷員工打卡簽到經緯度是否在打卡之內,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • PHP+Memcache實現wordpress訪問總數統計(非插件)

    PHP+Memcache實現wordpress訪問總數統計(非插件)

    這篇文章主要介紹了PHP+Memcache實現wordpress訪問總數統計,直接寫在主題functions.php中,并非實現的一個插件,需要的朋友可以參考下
    2014-07-07
  • Yii中Model(模型)的創建及使用方法

    Yii中Model(模型)的創建及使用方法

    這篇文章主要介紹了Yii中Model(模型)的創建及使用方法,結合實例形式較為詳細的分析了Yii中模型的基本創建技巧,使用方法及相關注意事項,需要的朋友可以參考下
    2015-12-12
  • php循環創建目錄示例分享(php創建多級目錄)

    php循環創建目錄示例分享(php創建多級目錄)

    這篇文章主要介紹了php循環創建目錄示例,原理就是不斷的嘗試創建上層目錄,依此類推,需要的朋友可以參考下
    2014-03-03
  • thinkphp中的url跳轉用法分析

    thinkphp中的url跳轉用法分析

    這篇文章主要介紹了thinkphp中的url跳轉用法,結合實例形式對比分析了幾種常用的URL跳轉技巧,需要的朋友可以參考下
    2016-07-07
  • PHP集成百度Ueditor 1.4.3

    PHP集成百度Ueditor 1.4.3

    我們在做項目的時候經常要遇到編輯器問題,就目前來看百度編輯器還是首選,今天我們就來看下如何在php中集成百度Ueditor,有相同需要的小伙伴參考下吧
    2014-11-11
  • Yii控制器中操作視圖js的方法

    Yii控制器中操作視圖js的方法

    這篇文章主要介紹了Yii控制器中操作視圖js的方法,結合實例形式總結分析了Yii框架動態操作視圖中頁面元素的相關技巧,需要的朋友可以參考下
    2016-07-07
  • Yii2語言國際化的配置教程

    Yii2語言國際化的配置教程

    這篇文章主要給大家介紹了關于Yii2語言國際化的配置教程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2018-08-08
  • php 判斷IP為有效IP地址的方法

    php 判斷IP為有效IP地址的方法

    這篇文章主要介紹了php 判斷IP為有效IP地址的方法,需要的朋友可以參考下
    2018-01-01
  • Codeigniter整合Tank Auth權限類庫詳解

    Codeigniter整合Tank Auth權限類庫詳解

    相交其他CodeIgniter的類庫,tank_auth,配置簡單,使用也簡單,并且作者也一直在更新。這篇文章主要介紹了Codeigniter整合Tank Auth權限類庫詳解,需要的朋友可以參考下
    2014-06-06

最新評論

福建体育彩票时时彩11