一、HTML
1 <table class="layui-hide layui-table" id="spu-data"></table>
二、JS
说明：需要引入layui中的table和laytpl模板引擎，laytpl可以自定义事件及自定义数据字段等
1 <!-- 拼接图片 --> 2 <script type="text/html" id="pimg"> 3 <img class="img" onmouseover="divIn(event)" onmouseout="divOut(event)" onmousemove="divIn(event)" src="__PUBLIC__/{{d.pimgurl}}t_{{d.pimgname}}" alt=""> 4 </script> 5 6 <!-- 查看详情按钮 --> 7 <script type="text/html" id="spu_detail"> 8 <button class="layui-btn layui-btn-xs layui-btn-primary spu_detail" artnum="{{d.artnum}}" value="{{d.basic_id}}" onclick="spuDetail(event)">查看详情</button> 9 </script> 10 11 <script type="text/html" id="hotcake_color"> 12 {{# if (d.hotcake === '超级爆款') { }} 13 <span style="display: block;background-color: #CCFFCC;">{{ d.hotcake }}</span> 14 {{# } else if(d.hotcake === '大爆款') { }} 15 <span style="display: block;background-color: #99CCCC;">{{ d.hotcake }}</span> 16 {{# } else if(d.hotcake === '小爆款') { }} 17 <span style="display: block;background-color: #FFCCCC;">{{ d.hotcake }}</span> 18 {{# } else if(d.hotcake === '热销款') { }} 19 <span style="display: block;background-color: #FFFFCC;">{{ d.hotcake }}</span> 20 {{# } else { }} 21 <span style="display: block;background-color: #CCFFFF;">{{ d.hotcake }}</span> 22 {{# } }} 23 </script>
1 <script type="text/javascript"> 2 3 layui.use(['form','laydate','layer','table','laytpl'],function(){ 4 var laydate = layui.laydate; 5 var layer = layui.layer; 6 var table = layui.table; 7 var laytpl = layui.laytpl; 8 9 //---SPU数据--------------------------------------------- 10 var spu_table = table.render({ 11 elem: '#spu-data', //html中table窗口的id 12 height: 800, 13 url: '__URL__/spu_data', //后台接口 14 toolbar: true, 15 loading: true, 16 text: { 17 none: '空空如也' 18 }, 19 title: 'spu数据', 20 size: 'sm', 21 page: { 22 layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], 23 limit: 20, 24 limits: [20,30,50,100,200,5000] 25 }, 26 cols: [[ 27 {field:'n', title: 'i', width: 55}, 28 {field:'', title: '图', width: 31, templet: '#pimg'}, // templet 引用laytpl中的自定义模板 29 {field:'', title: '查看详情', width: 120, templet: '#spu_detail'}, // 引用laytpl中的自定义模板 30 {field:'artnum', title: '货号', sort: true}, 31 {field:'gcolor', title: '颜色组', sort: true}, 32 {field:'cate', title: '品类', sort: true}, 33 {field:'price', title: '业绩', sort: true}, 34 {field:'sales', title: '销量', sort: true}, 35 {field:'hotcake', title: '热销程度', templet: '#hotcake_color', sort: true}, 36 {field:'sumcost', title: '商品成本', sort: true} 37 ]] 38 }); 39 40 // 搜索重载数据 41 $('#spudata_search').click(function(){ 42 // 获取日期的值 43 var date = $('#spusearch_date').val(); 44 if (!date) { 45 layer.msg('请选择日期区间搜索', { 46 time: 2000 47 }); 48 return false; 49 } 50 51 var perfor_val = $('#perfor_val').val();; 52 var hot_type = $('#hot_type').val(); 53 var artnum = $('#artnum').val(); 54 var cate_id = $('#cate_id').val(); 55 56 // 只选其一条件 57 if (perfor_val && hot_type) { 58 layer.msg('业绩区间和爆款类型只选其一', { 59 time: 2000 60 }); 61 return false; 62 } 63 64 // 数据重载 65 spu_table.reload({ 66 // 发送条件 67 where: { 68 artnum: artnum, 69 perfor_val: perfor_val, 70 hot_type: hot_type, 71 cate_id: cate_id, 72 date: date, 73 act: 'reload' 74 }, 75 page: { 76 layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], 77 curr: 1 78 } 79 }); 80 81 }) 82 83 }) 84 </script>
三、PHP
1 #这里是PHP类中主要的配合步骤 2 3 # 接收layui发送的limit 4 if (trim($_GET['limit'])) { 5 $limit = trim($_GET['limit']); 6 }else{ 7 $limit = 15; 8 } 9 10 # 按某字段排序，$rows为数据数组 11 $sort_num = array_column($rows,'num'); 12 array_multisort($sort_num,SORT_DESC,$rows, SORT_DESC); 13 14 # 调用自定义分页函数 15 $datas = array(); 16 $datas = showpage($rows,$limit); 17 18 $items = array(); 19 20 # 返回layui数据格式 21 $items['data'] = $datas['rows']; 22 $items['code'] = 0; 23 $items['msg'] = 'ok'; 24 $items['count'] = $datas['tot']; 25 26 exit(json_encode($items));
1 # showpage函数 2 3 function showpage($rows,$count){ 4 $tot = count($rows); // 总数据条数 5 6 if ($_GET['page']) { //获取当前页码 7 $page = $_GET['page']; 8 }else{ 9 $page = 1; 10 } 11 12 // $count = $count; # 每页显示条数 13 14 $countpage = ceil($tot/$count); # 计算总共页数 15 16 $start = ($page-1)*$count; # 计算每页开始位置 17 18 $datas = array_slice($rows, $start, $count); # 计算当前页数据 19 20 # 获取上一页和下一页 21 if ($page > 1) { 22 $uppage = $page-1; 23 }else{ 24 $uppage = 1; 25 } 26 27 if ($page < $countpage) { 28 $nextpage = $page+1; 29 }else{ 30 $nextpage = $countpage; 31 } 32 33 $pages['countpage'] = $countpage; 34 $pages['page'] = $page; 35 $pages['uppage'] = $uppage; 36 $pages['nextpage'] = $nextpage; 37 $pages['tot'] = $tot; 38 39 //循环加入序号 , 避免使用$i引起的序号跳位 40 $n = 1; 41 foreach ($datas as &$data) { 42 $data['n'] = $n; 43 $n++; 44 } 45 46 $pages['rows'] = $datas; 47 48 return $pages; 49 }