Thinkphp+Layui实现表格重载和前端分页

c1h2cy

已于 2023-01-06 11:39:07 修改

阅读量1.2k

点赞数

分类专栏：前端 PHP 文章标签：前端 layui javascript php

于 2022-12-23 17:45:44 首次发布

本文链接：https://blog.csdn.net/c1h2cy/article/details/128421754

版权

PHP 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

一、表格重载

需求是在前端页面输入查询字段内容（类似搜索），点击提交按钮之后，查询数据，并用返回的数据重载渲染表格。

1.前端界面

前端界面控制器和方法是路径是：/project/Match/index

2.html页面和js内容

（1）数据表格异步渲染，需要在table.render方法配置数据接口url。为table.render定义变量名tableIns，用于后面的数据重载表格渲染。

var tableIns = table.render({
elem: '#tabletwo'
,url:'/project/Match/match/user/user'
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,text: {
none: '暂无相关数据' //默认：无数据。
}
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'IDNUM', title:'工作证号', width:100, fixed: 'left', unresize: true, sort: true}
,{field:'XM', title:'姓名', fixed: 'left', width:120, edit: 'text'}
]]
,page: true
});

（2）提交按钮的click事件，调用表格的reload方法，可以通过where对象来把提交的数据作为参数传到接口并查询数据。

$("#testSubmit").click(function(){
var idnums = $('#idnum').val();
tableIns.reload({
where: {
idnum : idnums
}
,page: {
curr: 1
}
});
});

完整html和js内容（做了脱敏）：

    <h1>&nbsp;&nbsp;工作证号查询系统</h1>
    <form class="layui-form" action="" method="post">
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">请输工作证号</label>
      <div class="layui-input-block">
        <textarea name="idnum" id="idnum" placeholder="请输入工作证号,每个工作证号一行,直接从excel复制，在这里粘贴即可" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="button" class="layui-btn" id="testSubmit" lay-submit data-type="reload">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
  <br>
  <table class="layui-hide" id="tabletwo" lay-filter="tabletwo" lay-data=""></table>
 
  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
      <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
      <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
  </script>
   
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
   
  <script>
  var $ = layui.$;

  layui.use('table', function(){
    var table = layui.table;

    var tableIns = table.render({
      elem: '#tabletwo'
      ,url:'/project/Match/match/user/user'
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '提示'
        ,layEvent: 'LAYTABLE_TIPS'
        ,icon: 'layui-icon-tips'
      }]
      ,title: '用户数据表'
      ,text: {
        none: '暂无相关数据' //默认：无数据。
      }
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field:'IDNUM', title:'工作证号', width:100, fixed: 'left', unresize: true, sort: true}
        ,{field:'XM', title:'姓名', fixed: 'left', width:120, edit: 'text'}
      ]]
      ,page: true
    });
  $("#testSubmit").click(function(){
          var idnums = $('#idnum').val();
          tableIns.reload({
              where: {
                  idnum : idnums
              }
              ,page: {
                  curr: 1
              }
          });
      });
    //头工具栏事件
    table.on('toolbar(tabletwo)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'getCheckData':
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
        break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了：'+ data.length + ' 个');
        break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选': '未全选');
        break;
        
        //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮');
        break;
      };
    });
    
    //监听行工具事件
    table.on('tool(tabletwo)', function(obj){
      var data = obj.data;
      //console.log(obj)
      if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          obj.del();
          layer.close(index);
        });
      } else if(obj.event === 'edit'){
        layer.prompt({
          formType: 2
          ,value: data.email
        }, function(value, index){
          obj.update({
            email: value
          });
          layer.close(index);
        });
      }
    });

  });
  </script>

3.后端控制器（数据获取接口）

表格渲染的url:/project/Match/match/user/user，其中user/user是一个get传参，类似

/project/Match/match?user=user

这个参数也可以放到table.reload的where中传递。

后端控制器代码示例：

<?php
declare (strict_types = 1);

namespace app\project\controller;

use app\BaseController;
use think\facade\Request;
use think\facade\View;


class Match
{
    public function index()
    {
        return View::fetch();
    }
    public function match()
    {

        if(Request::param('idnum')!=''){
            //过滤特殊字符
            $idnum = Request::param('idnum','','strip_tags,strtoupper');
            $idnums=preg_split("/[\n\r]+/",$idnum,-1, PREG_SPLIT_NO_EMPTY);
            ......//省略逻辑处理代码
            if(Request::param('user')=='user'){
            $result = array(
                'code' =>0,
                'msg' => '',
                'count' => count($List),
                'data' =>$userList
            );
        
        echo json_encode($result );
    }
}

二、使用layui在前端实现分页

后端接口从数据表查询的数据，进行了二次调整，存在数组中返回。不能使用thinkphp自带的分页查询功能。使用layui的parseData函数进行前端分页处理。在tabel.render方法中添加parseData对象即可。

,parseData:function (res){
var userList;
if(this.page.curr){
result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
}
else{
result=res.data.slice(0,this.limit);
}
return{
"code":0
,"msg":""
,"count":res.count
,"data":userList
}
}