layui实现动态和静态分页

2024-10-10 14:39:40

开发管理后台是每一个开发人员都要熟悉的一个环节，作为后端程序员，公司的所有机密数据都掌握在我们手上，所以这个时候，如果不是公司的核心成员，是不能接触到某些数据的，这个时候所有的工作都落到了我们的手上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很大程度上减轻了我们的压力．

今天我们先来学习一下layui实现动态数据表，静态数据表，以及表格的分页，其中还涉及到动态刷新数据表,数据表工具栏使用,表单提交等功能，这个静态分页同样适用在信息类网站,我的工作开发环境是debian桌面版，所以所有的实验也是在debian基础上测试

layui动态数据表

动态数据表的效果图

实现过程

业务逻辑我都写到注释里面了，这样大家也友好一些，避免一会看代码，一会看说明容易分神

前端代码：

head.phtml（头文件代码）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title><?php echo $curTitle;?></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="static/css/layui.css" rel="external nofollow" media="all">
  <link rel="stylesheet" href="static/css/globals.css" rel="external nofollow" media="all">
  <script src="static/layui.js" charset="utf-8"></script>
  <!--引入自定义模块全局配置文件-->
  <script src="static/global.js" charset="utf-8"></script>
</head>
<body class="layui-layout-body">

order_orderlist.phtml（主体业务代码）

<?php $this->import("head"); ?>
<div class="layui-fluid">
  <blockquote class="layui-elem-quote">注意:为保障访问速度,查询同时请配合时间范围,默认显示一天以内的记录</blockquote>
  <br/>
  <div class="layui-form-item layui-form-pane">
    <div class="layui-inline">
      <label class="layui-form-label" style="width: 85px;">商户号</label>
      <div class="layui-input-inline" style="width: 165px;">
        <input type="text" name="merchant_no" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" style="width: 85px;">订单号:</label>
      <div class="layui-input-inline" style="width: 165px;">
        <input type="text" name="order_no" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" style="width: 95px;">发起时间</label>
      <div class="layui-input-inline" style="width: 165px;">
        <input type="text" class="layui-input" name="start_time" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 165px;">
        <input type="text" class="layui-input" name="end_time" id="test6" placeholder="yyyy-MM-dd HH:mm:ss">
      </div>
    </div>
    <div class="layui-inline">
      <button id="fuck-btn" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon"></i>查询</button>
      <button id="reloadtable" class="layui-btn layui-btn-normal"><i class="layui-icon">ဂ</i>刷新数据</button>
      <button id="reloadpage" class="layui-btn layui-btn-normal"><i class="layui-icon">ဂ</i>刷新页面</button>
    </div>
  </div>
<table class="layui-hide" id="test"></table>
</div>
<script>
  // 加载需要用到的模块，如果有使用到自定义模块也在此加载
  layui.use(['laydate','form','table'], function(){
    // 初始化元素，如果有大量的元素操作可以也引入和初始化element模块
    var table = layui.table;
    var form = layui.form;
    var laydate = layui.laydate;
    var $ = layui.$;
    // 定义时间选择器
    laydate.render({
      elem:'#test5',
      type:'datetime'
    });
    laydate.render({
      elem:'#test6',
      type:'datetime'
    });
    // 动态数据表渲染
    table.render({
       elem: '#test'              /* 绑定表格容器id */
      ,url:'index.php?c=orders&a=orderList'   /* 获取数据的后端API URL */
      ,where:{getlist:'orderlist'}       /* 这里还可以额外的传参到后端 */
      ,method: 'post'              /* 使用什么协议，默认的是GET */
      ,cellMinWidth: 60             /* 最小单元格宽度 */
      ,cols: [[
         {field:'orderno', title: '订单号',align: 'center',sort:true}
        ,{field:'username', title: '商户号',align: 'center'}
        ,{field:'user_orderno', title: '商户订单号',align: 'center'}
        ,{field:'trace_time', title: '创建时间',align: 'center',sort:true,width:200}
        ,{field:'price', title: '交易金额',align: 'center',sort:true}
        ,{field:'fee', title: '手续费',align: 'center',sort:true,width:80}
        ,{field:'real_price', title: '结算金额',align: 'center',sort:true}
        ,{field:'pay_type', title: '支付类型', align: 'center'}
        ,{field:'pay_status', title: '订单状态',align: 'center',width:90}
        ,{field:'pay_time', title: '支付时间',align: 'center',sort:true,width:200}
        ,{field:'push_nums', title: '通知次数',align: 'center',width:90}
        ,{field:'notice_result', title: '通知支付结果',align: 'center'}
      ]]  // 使用sort将自动为我们添加排序事件，完全不用人工干预
      ,page: true
      ,limit:10
      ,id:'testReload' // 这里就是重载的id
    });
    // 数据表重载，这个是配合上面的表格一起使用的
    var active = {
      reload:function(){
        table.reload('testReload',{
        　　 // 点击查询和刷新数据表会把以下参数传到后端进行查找和分页显示
          where:{
            merchant_no:$("input[name='merchant_no']").val(),
            order_no: $("input[name='order_no']").val(),
            start_time:$("input[name='start_time']").val(),
            end_time:$("input[name='end_time']").val()
          }
        });
      }
    };

    form.render(); // 渲染表单
    // 查找点击时间，这里的事件绑定建议使用on来绑定,因为元素都是后期渲染过的
    $("#fuck-btn").click(function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    $("#reloadtable").click(function(){
      active.reload();
    });
    $("#reloadpage").click(function(){
      location.reload();
    });
  });
</script>
</body>
</html>

后端php代码

order.php(订单控制器,部分业务代码不用太深究）

  // 订单列表
  public function orderList()
  {
    // 动态渲染前台表格
    $operating = $this->request->getPost('getlist', 'trim');
    // 首次这里不会执行，数据表开始渲染的时候才会请求以下部分
    if ('orderlist' === $operating) {
      // 进行分页查询
      $page = $this->request->getPost('page', 'intval', 1);
      $limit = $this->request->getPost('limit', 'intval', 10);
      $start = ($page - 1) * $limit;

      // 如果有其他条件查询在这里可以带上
      $merchant_no = $this->request->getPost('merchant_no', 'trim', '');
      $order_no = $this->request->getPost('order_no', 'trim', '');
      $start_time = $this->request->getPost('start_time', 'trim', date("Y-m-d H:i:s", strtotime("-1 day")));
      $end_time = $this->request->getPost('end_time', 'trim', date("Y-m-d H:i:s"), time());

      // 获取符合条件的记录数量
      if($GLOBALS['SESSION']['admin_group_id'] >1){
        $merchant_no = $GLOBALS['SESSION']['admin_username'];
      }
      $order_nums = orders::getItemNums($merchant_no, $order_no, $start_time, $end_time);

      // 分页进行查询条件记录
      $order_list = orders::getItem($merchant_no, $order_no, $start_time, $end_time, $start, $limit);
      $datas = ['code' => 0, 'msg' => ''];
      // 将总的记录条数传给前台进行渲染分页
      $datas['count'] = $order_nums;
      // 重新过滤一遍数据，很多没有用到的不能全部发给试图，尤其是动态渲染的，很容易暴露，建议加工一下再传
      foreach ($order_list as $k => $v) {
        $order_list[$k]['orderno'] = $v['order_id'];
        $order_list[$k]['user_orderno'] = $v['order_no'];
        $order_list[$k]['username'] = $v['merchant_no'];
        $order_list[$k]['pay_type'] = ($v['pay_type'] == 1) ? "支付宝扫码" : "微信扫码";
        $order_list[$k]['pay_status'] = ($v['callback_status'] > 0) ? "已支付" : "未支付";
        $order_list[$k]['pay_time'] = $v['callback_time'];
        $order_list[$k]['notice_result'] = ($v['push_status'] > 0) ? "<span class=\"layui-badge layui-bg-blue\">已推送</span>" : "<span class=\"layui-badge layui-bg-gray\">未推送</span>";
      }
      // 将数据通过json格式响应给前台渲染
      $datas['data'] = $order_list;
      echo json_encode($datas);
      safe_exit();
    }
    // 首次先现实模板页
    self::$view->render('orders_orderlist');
  }

数据格式请参照官方指导：

数据接口格式

{"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"诗人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,"classify":"诗人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"classify":"词人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"诗人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"classify":"词人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"classify":"酱油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"classify":"词人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"classify":"词人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"签名-20","experience":770,"logins":24,"wealth":92420248,"classify":"诗人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"签名-21","experience":184,"logins":131,"wealth":71566045,"classify":"词人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"签名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"签名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"签名-24","experience":212,"logins":133,"wealth":59011052,"classify":"词人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"签名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"签名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"签名-27","experience":371,"logins":44,"wealth":64419691,"classify":"诗人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"签名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"签名-29","experience":647,"logins":107,"wealth":97450636,"classify":"酱油","score":27}]}

表格模块：http://www.layui.com/doc/modules/table.html

调试的时候可以打开chrome,firefox 的 console 和 network进行查看，仔细研究分析

数据表工具条事件

工具栏是指在行单元格内可以操作对应的行，因为使用layui的元素监听，很容易就获取到相应对应整行的数据.

比如获取表单的数据,只需要监听表单提交事件，直接就可以一次获取到所有的参数和值：

<script>
  layui.use(['form','jquery'],function(){
    let form = layui.form,
      $ = layui.$;
    form.on('submit(fuck-submit)', function(data){
      if(data.field.password && data.field.password.length < 5){
        layer.msg('密码不能小于５位');
        return false;
      }
      $.post('index.php?&a=adminEdit&op=update&uid='+data.field.uid,{
          username:data.field.username,
          password:data.field.password,
          level:data.field.level,
          is_enabled:data.field.is_enabled
        }, function(responseText){
          //console.log(responseText);
          if(responseText.errno === 8){
            layer.msg(responseText.errstr,{icon:6});
            return false;
          } else {
            layer.msg(responseText.errstr,{icon:5});
            location.reload();
          }
        },'json'
      );
      return false;
    });
  });
</script>

这里是官方文档的：

form.on('submit(*)', function(data){
 console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

我们今天要操作的数据表也是要采用这种方式，首先我们看看看怎样生成和渲染出工具条：

只需要在body部分插入一个容器,注意这里的javascript的type是text/html,这个是供layui解析用的，在这里的d也就是我们在渲染表格的时候的数据,所有的字段的值都可以在这个d里面获取到

<table class="layui-hide" lay-filter="fucktest" id="test"></table>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" user_id="{{d.admin_id}}" lay-event="edit">编辑</a>
  </script>

您可能感兴趣的文章:

基于LayUI分页和LayUI laypage分页的使用示例
基于LayUI实现前端分页功能的方法
layui分页效果实现代码
深入理解jQuery layui分页控件的使用

基于LayUI分页和LayUI laypage分页的使用示例

本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.m
深入理解jQuery layui分页控件的使用

$.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d
基于LayUI实现前端分页功能的方法

一.LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为http://www.layui.com/,下载后引入项目中. <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="exte
layui分页效果实现代码

本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css" > </head> <body
layui实现动态和静态分页

开发管理后台是每一个开发人员都要熟悉的一个环节,作为后端程序员,公司的所有机密数据都掌握在我们手上,所以这个时候,如果不是公司的核心成员,是不能接触到某些数据的,这个时候所有的工作都落到了我们的手上,从PS到Linux都需要我们亲历亲为,还好发现了layui这个前端框架,很大程度上减轻了我们的压力．今天我们先来学习一下layui实现动态数据表,静态数据表,以及表格的分页,其中还涉及到动态刷新数据表,数据表工具栏使用,表单提交等功能,这个静态分页同样适用在信息类网站,我的工作开发环境是debia
layui实现数据分页功能

本文实例为大家分享了layui实现数据分页功能,供大家参考,具体内容如下官网layui table演示页面示例截图: 页面引入layui.css. layui.js <div id="pTable" style="width: 1200px;"> <table class="layui-table" id="layui_table_id" lay-filter="test"> &
layUI实现前端分页和后端分页

本文实例为大家分享了layUI实现前端分页和后端分页效果,供大家参考,具体内容如下 layui后端分页: function pagination(curr,gwayId,mlity,ePart) { $(".manage_ys_list").html('加载中...'); let dd={ conditions: { gatewayId:gwayId, searchText:"", pageSize:15, pageIndex:curr-1 }, identity:
Python Django实现layui风格+django分页功能的例子

第一步:首先定义一个视图函数,用于提供数据,实现每页显示数据个数,返回每页请求数据 from django.shortcuts import render from django.core.paginator import Paginator # Django内置分页功能模块 def index(request): # 提供json数据 resp = {"id":10000,"username":"user-0","sex":
layui table 获取分页 limit的方法

如下所示: var table_name = table.render({ }); page_size = table_name.config.limit; table_name 是自定义变量以上这篇layui table 获取分页 limit的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法

在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下: 1.HTML 搜索输入框 <form class="layui-form"> <div class="layui-input-inlin
thinkphp5+layui实现的分页样式示例

本文实例讲述了thinkphp5+layui实现的分页样式.分享给大家供大家参考,具体如下: tp5之layui分页样式 1.分页类路径:\thinkphp\library\think\paginator\driver Layui.php <?php namespace think\paginator\driver; use think\Paginator; class Layui extends Paginator { /** * 上一页按钮 * @param string $text *
layui实现数据分页功能（ajax异步）

最近项目要使用layUI的分页,看了官方demo感觉还是不太清晰,摸索了一下,现在记录一下. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui-v2.4.5/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vendor/layui-v2.4.
Javaweb使用thymeleaf局部刷新结合Layui插件实现Html分页

目录 1.前言 2.正文 2.1 开发环境介绍 2.2 实现代码 2.3 实现流程说明 2.4 实现效果 3.总结 1.前言最近个人在做开发的时候,需要实现前端的Html页面分页.由于好一段时间没写前端的代码了,有些生疏了.现就实践成果,做下记录与分享! 2.正文 2.1 开发环境介绍后端:SpringBoot.Thymeleaf 前端:Html.Jquery.Layui插件 2.2 实现代码 html页面代码: <html lang="zh-cn" xmlns:th=&qu

layui实现动态和静态分页

您可能感兴趣的文章:

相关推荐

随机推荐