使用layui实现表格搜索并显示最新结果

程式员阿波

于 2024-04-23 09:49:03 发布

阅读量1k

点赞数 19

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/tombosky/article/details/138110924

版权

使用layui实现表格搜索并显示最新结果

在Web开发中，表格是常见的数据展示方式之一。而Layui是一款优秀的前端UI框架，它提供了丰富的组件和功能，使得开发者能够快速构建出美观且实用的界面。本文将介绍如何使用layui来实现一个表格，并在其中添加搜索功能，以便用户能够根据关键字搜索并显示最新的结果。

步骤1：引入layui的CSS和JS文件

首先，我们需要在HTML页面中引入layui的CSS和JS文件。可以通过以下代码来引入：

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>

步骤2：创建表格容器

接下来，我们需要创建一个表格容器，用于放置表格数据。可以使用<table>标签来创建表格容器，如下所示：

<table id="myTable" lay-filter="myTable"></table>

步骤3：编写JavaScript代码

现在，我们需要编写JavaScript代码来实现表格的渲染和搜索功能。首先，我们可以使用layui的table模块来渲染表格。以下是一个简单的示例代码：

layui.use(['table'], function(){
  var table = layui.table;
  
  // 渲染表格
  table.render({
    elem: '#myTable',
    url: 'data.json', // 数据接口
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'}
    ]]
  });
});

在上面的代码中，我们使用了table.render()方法来渲染表格。其中，elem参数指定了表格容器的选择器，url参数指定了数据接口的URL地址，cols参数定义了表格的列信息。

步骤4：添加搜索功能

为了实现搜索功能，我们可以使用layui的form模块来创建一个搜索表单，并通过监听表单提交事件来实现搜索逻辑。以下是一个简单的示例代码：

layui.use(['table', 'form'], function(){
  var table = layui.table;
  var form = layui.form;
  
  // 渲染表格
  table.render({
    elem: '#myTable',
    url: 'data.json', // 数据接口
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'}
    ]]
  });
  
  // 创建搜索表单
  var searchForm = $('<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">搜索</label><div class="layui-input-block"><input type="text" name="keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input"></div></div></form>');
  $('body').append(searchForm);
  
  // 监听表单提交事件
  searchForm.submit(function(event){
    event.preventDefault(); // 阻止表单默认提交行为
    var keyword = $(this).find('input[name="keyword"]').val(); // 获取搜索关键字
    
    // 更新表格数据源
    table.reload('myTable', {
      url: 'data.json?keyword=' + keyword, // 更新数据接口URL
      page: {curr: 1} // 重置分页为第一页
    });
  });
});

在上面的代码中，我们首先创建了一个搜索表单，并将其添加到页面中。然后，我们通过监听表单的提交事件来实现搜索逻辑。当用户提交表单时，我们获取搜索关键字，并更新表格的数据源，使其根据关键字进行过滤。

步骤5：完整实例

下面是一个完整的示例代码，包含了上述所有步骤的内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui表格搜索示例</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css">
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
</head>
<body>
  <table id="myTable" lay-filter="myTable"></table>
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">搜索</label>
      <div class="layui-input-block">
        <input type="text" name="keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input">
      </div>
    </div>
  </form>
  <script>
    layui.use(['table', 'form'], function(){
      var table = layui.table;
      var form = layui.form;
      
      // 渲染表格
      table.render({
        elem: '#myTable',
        url: 'data.json', // 数据接口
        cols: [[
          {field: 'id', title: 'ID'},
          {field: 'name', title: '姓名'},
          {field: 'age', title: '年龄'}
        ]]
      });
      
      // 创建搜索表单
      var searchForm = $('<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">搜索</label><div class="layui-input-block"><input type="text" name="keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input"></div></div></form>');
      $('body').append(searchForm);
      
      // 监听表单提交事件
      searchForm.submit(function(event){
        event.preventDefault(); // 阻止表单默认提交行为
        var keyword = $(this).find('input[name="keyword"]').val(); // 获取搜索关键字
        
        // 更新表格数据源
        table.reload('myTable', {
          url: 'data.json?keyword=' + keyword, // 更新数据接口URL
          page: {curr: 1} // 重置分页为第一页
        });
      });
    });
  </script>
</body>
</html>

总结

通过以上步骤，我们成功地实现了一个使用layui框架的表格，并添加了搜索功能。用户可以在搜索框中输入关键字，点击搜索按钮后，表格会根据关键字进行过滤，并显示最新的结果。希望本文对您有所帮助！

程式员阿波

关注

19
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用layui实现表格搜索并显示最新结果

通过以上步骤，我们成功地实现了一个使用layui框架的表格，并添加了搜索功能。用户可以在搜索框中输入关键字，点击搜索按钮后，表格会根据关键字进行过滤，并显示最新的结果。希望本文对您有所帮助！
复制链接

扫一扫