二、js说明:需要引入layui中的table和laytpl模板引擎 " />

二、js说明:需要引入layui中的table和laytpl模板引擎"/>
 首页 > 作文

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

更新时间:2023-04-08 08:06:29 阅读: 评论:0

一、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" onmouover="divin(event)" onmouout="divout(event)" onmoumove="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></sc保密工作计划ript><script type="text/html" id="hotcake_color"> {{# if (d.hotcake === '超级爆款') { }}   <span style="display: block;background-color: #ccffcc;">{{ d.hotcake }}</span> {{# } el if(d.hotcake === '大爆款') { }}   <span style="display: block;background-color: #99cccc;">{{ d.hotcake }}</span>  {{# } el if(d.hotcake === '小爆款') { }}   <span style="display: block;background-color: #ffcccc;">{{ d.hotcake }}</span>  {{# } el if(d.hotcake === '热销款') { }}   <span style="display: block;background-color: #ffffcc;">{{ d.hotcake }}</span>  {{# } el { }}   <span style="display: block;background-color: #ccffff;">{{ d.hotcake }}</span>  {{# } }} </script>
<script type="text/javascript">layui.u(['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_arch').click(function(){  // 获取日期的值  var date = $('#spuarch_date').val();  if (!date) {   layer.msg('请选择日期区间搜索', {    time: 2000   });   return fal;  }  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 fal;  }  // 数据重载  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', 'pr东莞银瓶山森林公园ev', 'page', 'next', 'limit', 'refresh', 'skip'],    curr: 1   }  }); })}) </script>

三、php

#这里是php类中主要的配合步骤# 接收layui发送的limitif (trim($_get['limit'])) { $limit = trim($_get['limit']);}el{ $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));
# sho印度大学排名wpage函数function showpage($rows,$count){  $tot = count($rows); // 总数据条数 if ($_get['page']) { //获取当前页码  $page = $_get['page']; }el{  $page = 1; } // $count = $count; # 每页显示条数 $countpage = ceil($tot/$count); # 计算总共页数 $start = ($page-1)*$count; # 计算每页开始位置 $datas = array_slice($rows, $start, $count); # 计算当前页数据 # 获取上一页和下一页 if ($page > 1) {  $uppage = $page-1; }el{  $uppage = 1; } if ($page < $countpage) {  $nextpage = $page+1; }el{  $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数据表格实现数据分页渲染代码就是www.887551.com分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持www.887551.com。

本文发布于:2023-04-08 08:06:27,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/589ab2a5fea4304b106022802752f91a.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:php+layui数据表格实现数据分页渲染代码.doc

本文 PDF 下载地址:php+layui数据表格实现数据分页渲染代码.pdf

标签:数据   自定义   查看详情   每页
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图