为Layui Table组件添加前端搜索功能

最新推荐文章于 2025-07-13 22:18:32 发布

caifox菜狐狸

最新推荐文章于 2025-07-13 22:18:32 发布

阅读量1k

点赞数 19

CC 4.0 BY-SA版权

分类专栏： JavaScript 学习之旅：从新手到专家文章标签：前端 layui javascript table 前端搜索表格搜索前端框架

本文链接：https://blog.csdn.net/caifox/article/details/149293993

JavaScript 学习之旅：从新手到专家专栏收录该内容

86 篇文章

订阅专栏

在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。

然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添加搜索功能。虽然Layui本身提供了丰富的API和配置选项，但实现一个高效的前端搜索功能仍然需要一些额外的开发工作。此外，数据的动态加载也是现代Web应用中常见的需求，通过Ajax从服务器获取数据，不仅可以提高页面的响应速度，还能减少不必要的页面刷新。

本教程将详细指导你如何为Layui Table组件添加前端搜索功能，并通过Ajax读取模拟数据。我们将从项目环境搭建开始，逐步介绍HTML页面结构的创建、JavaScript代码的编写，以及搜索功能的实现和优化。通过本教程，你将能够掌握如何结合Layui和Ajax技术，为你的Web应用构建一个功能强大且用户友好的表格搜索功能。

1. 项目环境搭建

1.1 安装layui框架

Layui是一个前端UI框架，它提供了丰富的组件，方便开发者快速搭建界面。要为Layui Table组件添加前端搜索功能，首先需要安装Layui框架。

访问Layui官方网站 https://www.layui.com/，下载最新版本的Layui框架。
将下载的Layui文件解压到项目目录中，确保项目能够正确加载Layui的CSS和JavaScript文件。例如，将Layui文件放在项目目录下的layui文件夹中。
在HTML文件中引入Layui的CSS和JavaScript文件。代码如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
    <script src="layui/layui.js"></script>
</body>
</html>

通过以上步骤，就可以成功安装Layui框架，为后续的开发工作做好准备。

1.2 准备模拟数据json文件

为了实现前端搜索功能，需要有模拟数据供Layui Table组件读取和显示。这里使用一个JSON文件来存储模拟数据。

在项目目录下创建一个名为data的文件夹，并在其中创建一个名为mockData.json的文件。
在mockData.json文件中，编写模拟数据。以下是一个示例：

[
    {
        "id": 1,
        "name": "Alice",
        "age": 25,
        "email": "alice@example.com"
    },
    {
        "id": 2,
        "name": "Bob",
        "age": 30,
        "email": "bob@example.com"
    },
    {
        "id": 3,
        "name": "Charlie",
        "age": 35,
        "email": "charlie@example.com"
    }
]

确保JSON文件格式正确，数据结构清晰，便于后续通过Ajax读取和处理。
在HTML文件中，使用Ajax请求来读取mockData.json文件，将数据加载到Layui Table组件中。代码如下：

layui.use(['table'], function(){
    var table = layui.table;
    table.render({
        elem: '#test',
        url: 'data/mockData.json', // 指定数据接口
        cols: [[ // 表头
            {field: 'id', title: 'ID', sort: true},
            {field: 'name', title: '姓名'},
            {field: 'age', title: '年龄'},
            {field: 'email', title: '邮箱'}
        ]]
    });
});

通过以上步骤，就可以完成项目环境的搭建，为Layui Table组件添加前端搜索功能做好了准备。

2. 创建HTML页面结构

2.1 引入layui资源

在HTML文件中，确保正确引入Layui的CSS和JavaScript文件。这一步已经在项目环境搭建部分完成，但为了完整性，再次确认代码如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
    <script src="layui/layui.js"></script>
</body>
</html>

通过引入这些资源，可以确保Layui的样式和功能正常工作，为后续的搜索框和表格的显示提供支持。

2.2 添加搜索框和表格容器

在HTML页面中，添加一个搜索框和一个表格容器，用于实现前端搜索功能和显示数据。代码如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">搜索</label>
                    <div class="layui-input-block">
                        <input type="text" name="search" id="search" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <table id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>
    <script src="layui/layui.js"></script>
</body>
</html>

搜索框：使用<input>标签创建一个搜索框，设置id="search"，方便后续通过JavaScript获取搜索内容。
表格容器：使用<table>标签创建一个表格容器，设置id="test"，并指定lay-filter="test"，用于绑定Layui Table组件。

通过以上步骤，HTML页面结构已经搭建完成，为后续实现前端搜索功能和显示数据提供了基础。

3. 编写JavaScript代码

3.1 初始化表格

在编写JavaScript代码时，首先需要初始化Layui Table组件，使其能够正确加载和显示数据。通过调用layui.use方法，加载table模块，并使用table.render方法来初始化表格。以下是具体的代码实现：

layui.use(['table'], function(){
    var table = layui.table;
    table.render({
        elem: '#test',
        url: 'data/mockData.json', // 指定数据接口
        cols: [[ // 表头
            {field: 'id', title: 'ID', sort: true},
            {field: 'name', title: '姓名'},
            {field: 'age', title: '年龄'},
            {field: 'email', title: '邮箱'}
        ]],
        page: true, // 开启分页
        limits: [5, 10, 15, 20], // 每页显示条数选择
        limit: 5 // 默认显示条数
    });
});

elem: 指定表格容器的ID，这里是#test。
url: 指定数据接口的路径，这里是data/mockData.json。
cols: 定义表格的表头字段和显示名称。
page: 开启分页功能，方便用户查看大量数据。
limits: 定义每页显示条数的选择范围。
limit: 设置默认每页显示的条数。

通过以上代码，表格能够正确加载模拟数据，并显示在页面上，同时支持分页功能，方便用户查看和操作数据。

3.2 实现搜索功能

实现前端搜索功能的关键在于监听搜索框的输入事件，并根据用户输入的内容动态过滤表格中的数据。以下是具体的实现步骤和代码：

layui.use(['table', 'jquery'], function(){
    var table = layui.table;
    var $ = layui.jquery;

    // 初始化表格
    table.render({
        elem: '#test',
        url: 'data/mockData.json', // 指定数据接口
        cols: [[ // 表头
            {field: 'id', title: 'ID', sort: true},
            {field: 'name', title: '姓名'},
            {field: 'age', title: '年龄'},
            {field: 'email', title: '邮箱'}
        ]],
        page: true, // 开启分页
        limits: [5, 10, 15, 20], // 每页显示条数选择
        limit: 5 // 默认显示条数
    });

    // 监听搜索框的输入事件
    $('#search').on('input', function(){
        var searchValue = $(this).val(); // 获取搜索框的值
        table.reload('test', { // 重新加载表格数据
            where: { // 设置搜索条件
                search: searchValue
            },
            page: {
                curr: 1 // 重置当前页为第一页
            }
        });
    });
});

监听搜索框的输入事件: 使用$('#search').on('input', function(){...})监听搜索框的输入事件，当用户在搜索框中输入内容时，触发该事件。
获取搜索框的值: 使用$(this).val()获取搜索框的值，存储在searchValue变量中。
重新加载表格数据: 使用table.reload方法重新加载表格数据，并通过where参数传递搜索条件。这里将搜索条件设置为{search: searchValue}，表示根据用户输入的内容进行搜索。
重置当前页为第一页: 在搜索时，将当前页设置为第一页，方便用户查看搜索结果。

通过以上代码，实现了前端搜索功能，用户可以在搜索框中输入内容，表格会根据输入的内容动态过滤数据，并显示搜索结果。

4. 测试与优化

4.1 测试搜索功能

在完成前端搜索功能的开发后，需要对搜索功能进行全面的测试，确保其能够正常工作并满足用户需求。以下是测试搜索功能的具体步骤和注意事项：

测试数据准备

使用不同类型的测试数据，包括但不限于：
- 完整匹配数据：如输入“Alice”，检查是否能准确匹配到名字为“Alice”的记录。
- 部分匹配数据：如输入“li”，检查是否能匹配到名字中包含“li”的记录，如“Alice”和“Charlie”。
- 大小写敏感性测试：输入“alice”和“Alice”，检查搜索是否区分大小写。
- 特殊字符测试：输入特殊字符，如“@”或“#”，检查是否能正确处理。
- 空字符串测试：输入空字符串，检查是否能正常显示所有数据。

功能测试

搜索响应测试：输入搜索关键词后，检查表格是否能即时响应并显示搜索结果。
分页功能测试：在搜索结果中，检查分页功能是否正常工作，包括点击下一页、上一页、跳转到指定页码等操作。
搜索条件传递测试：检查搜索条件是否正确传递到后端（如果是后端分页），通过浏览器开发者工具的网络面板查看请求参数。

异常测试

无匹配结果测试：输入不存在的关键词，检查表格是否能正确显示“无匹配结果”的提示信息。
网络异常测试：模拟网络延迟或断网情况，检查搜索功能是否能给出合理的提示信息，如“网络异常，请稍后再试”。
大量数据测试：使用包含大量记录的JSON文件，测试搜索功能在处理大数据量时的性能和响应速度。

跨浏览器测试

在不同的浏览器（如Chrome、Firefox、Safari、Edge等）中测试搜索功能，确保在各种浏览器环境下都能正常工作，没有兼容性问题。

用户反馈测试

邀请真实用户进行测试，收集他们的反馈意见，了解搜索功能是否符合用户的实际使用习惯，是否存在需要改进的地方。

通过以上测试步骤，可以全面验证前端搜索功能的正确性、稳定性和用户体验，确保其在实际应用中能够正常工作。

4.2 优化用户体验

在测试过程中，可能会发现一些影响用户体验的问题，需要对搜索功能进行优化。以下是一些优化用户体验的建议和方法：

搜索结果高亮显示

当用户输入搜索关键词后，对搜索结果中匹配的部分进行高亮显示，方便用户快速定位到匹配的内容。可以通过CSS样式实现高亮效果，例如：

.highlight {
    background-color: yellow;
}

在JavaScript中，对搜索结果进行处理，将匹配的部分替换为带有高亮样式的HTML标签：

function highlightKeyword(text, keyword) {
    return text.replace(new RegExp(keyword, 'gi'), '<span class="highlight">$&</span>');
}

在表格渲染时，对每一列的数据调用highlightKeyword函数，实现高亮显示。

搜索延迟优化

如果搜索框的输入事件直接触发搜索操作，可能会导致频繁的请求和页面刷新，影响用户体验。可以通过设置搜索延迟来优化，即用户停止输入一段时间后才触发搜索操作。例如，使用setTimeout和clearTimeout实现延迟搜索：

var searchTimeout;
$('#search').on('input', function(){
    clearTimeout(searchTimeout);
    var searchValue = $(this).val();
    searchTimeout = setTimeout(function(){
        table.reload('test', {
            where: {
                search: searchValue
            },
            page: {
                curr: 1
            }
        });
    }, 300); // 设置延迟时间为300毫秒
});

搜索历史记录

为搜索框添加搜索历史记录功能，方便用户快速选择之前输入过的关键词。可以使用浏览器的localStorage或sessionStorage来存储搜索历史记录：

// 保存搜索历史记录
function saveSearchHistory(keyword) {
    var history = JSON.parse(localStorage.getItem('searchHistory') || '[]');
    if(history.indexOf(keyword) === -1) {
        history.push(keyword);
        localStorage.setItem('searchHistory', JSON.stringify(history));
    }
}

// 加载搜索历史记录
function loadSearchHistory() {
    var history = JSON.parse(localStorage.getItem('searchHistory') || '[]');
    var historyList = $('#searchHistory');
    historyList.empty();
    history.forEach(function(keyword){
        historyList.append('<li>' + keyword + '</li>');
    });
}

$('#search').on('input', function(){
    var searchValue = $(this).val();
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function(){
        table.reload('test', {
            where: {
                search: searchValue
            },
            page: {
                curr: 1
            }
        });
        saveSearchHistory(searchValue); // 保存搜索历史记录
    }, 300);
});

loadSearchHistory(); // 加载搜索历史记录

搜索建议功能

在用户输入搜索关键词时，提供搜索建议，帮助用户更快地找到想要的内容。可以通过监听输入事件，根据用户输入的内容实时查询匹配的关键词，并显示在搜索框下方的下拉列表中。例如：

$('#search').on('input', function(){
    var searchValue = $(this).val();
    if(searchValue.length >= 2) { // 当输入长度大于等于2时，显示搜索建议
        $.ajax({
            url: 'data/mockData.json', // 模拟数据接口
            type: 'GET',
            success: function(data){
                var suggestions = data.filter(function(item){
                    return item.name.indexOf(searchValue) !== -1;
                }).map(function(item){
                    return item.name;
                });
                showSearchSuggestions(suggestions);
            }
        });
    } else {
        hideSearchSuggestions();
    }
});

function showSearchSuggestions(suggestions) {
    var suggestionsList = $('#searchSuggestions');
    suggestionsList.empty();
    suggestions.forEach(function(suggestion){
        suggestionsList.append('<li>' + suggestion + '</li>');
    });
    suggestionsList.show();
}

function hideSearchSuggestions() {
    $('#searchSuggestions').hide();
}

在HTML中添加一个用于显示搜索建议的下拉列表：

<div class="layui-input-block">
    <input type="text" name="search" id="search" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
    <ul id="searchSuggestions" class="layui-nav layui-nav-tree" style="display:none;">
    </ul>
</div>

响应式设计

确保搜索框和表格在不同屏幕尺寸下的显示效果良好，特别是移动端。使用Layui自带的响应式布局功能，或者自定义CSS样式，使页面在不同设备上都能正常显示。

提示信息优化

在搜索过程中，如果出现网络异常或无匹配结果等情况，给出清晰、友好的提示信息，避免让用户感到困惑。例如：

table.on('done(test)', function(res){
    if(res.data.length === 0) {
        layer.msg('未找到匹配的记录');
    }
});

通过以上优化措施，可以显著提升前端搜索功能的用户体验，使用户在使用过程中更加便捷、高效和舒适。

5. 总结

在本教程中，我们详细介绍了如何为Layui Table组件添加前端搜索功能，并通过Ajax读取模拟数据。以下是整个过程的总结：

5.1 项目环境搭建

安装Layui框架：从Layui官方网站下载最新版本的框架文件，解压到项目目录中，并在HTML文件中正确引入Layui的CSS和JavaScript文件。这一步是实现后续功能的基础。
准备模拟数据JSON文件：创建一个JSON文件来存储模拟数据，确保数据格式正确。通过Ajax请求将数据加载到Layui Table组件中，为表格的显示和搜索功能提供数据支持。

5.2 创建HTML页面结构

引入Layui资源：确保HTML文件中正确引入了Layui的CSS和JavaScript文件，以便Layui的样式和功能能够正常工作。
添加搜索框和表格容器：在HTML页面中添加一个搜索框和一个表格容器。搜索框用于输入搜索内容，表格容器用于显示数据。通过合理的布局，为用户提供了良好的交互体验。

5.3 编写JavaScript代码

初始化表格：使用layui.use方法加载table模块，并通过table.render方法初始化表格。设置表格的表头字段、数据接口路径、分页功能等参数，使表格能够正确加载和显示模拟数据。
实现搜索功能：监听搜索框的输入事件，获取用户输入的搜索内容，并通过table.reload方法重新加载表格数据，根据搜索条件动态过滤数据。同时，重置当前页为第一页，方便用户查看搜索结果。

5.4 测试与优化

测试搜索功能：对搜索功能进行全面测试，包括功能测试、异常测试、跨浏览器测试和用户反馈测试。使用不同类型的测试数据，验证搜索功能的正确性、稳定性和兼容性，确保其能够满足用户需求。
优化用户体验：根据测试结果，对搜索功能进行优化，提升用户体验。优化措施包括搜索结果高亮显示、搜索延迟优化、添加搜索历史记录、提供搜索建议功能、响应式设计和提示信息优化等。通过这些优化，使搜索功能更加便捷、高效和友好。

通过以上步骤，我们成功为Layui Table组件添加了前端搜索功能，并实现了数据的动态加载和过滤。在实际开发中，可以根据具体需求进一步扩展和优化该功能，以满足更多的应用场景和用户需求。