php+layui数据表格实现数据分页渲染代码

一、HTML

?

1	< table class = "layui-hide layui-table" id = "spu-data" ></ table >

二、JS

说明：需要引入layui中的table和laytpl模板引擎，laytpl可以自定义事件及自定义数据字段等

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<!-- 拼接图片 --> <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>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

#这里是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 ));

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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

原文链接：https://www.cnblogs.com/yachyu/p/10768252.html