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