layui多个数据表格共存一个页面处理

最新推荐文章于 2026-05-03 11:54:56 发布

原创

最新推荐文章于 2026-05-03 11:54:56 发布 · 1.8w 阅读

标签

#layui数据表格

收录于

本文介绍如何在layui中处理一个页面存在多个数据表格，并且各自拥有独立搜索功能的问题。通过方法级渲染，实现了每个搜索条件仅刷新对应表格，详细步骤包括html布局、jq代码实现和数据表格的重载方式。

layui多个数据表格共存一个页面处理

今天在做后台时，遇到一个棘手的问题，就是layui的数据表格如果两个表格在一个页面，每个表格有一个搜索查询的筛选条件，那么每个搜索结果对应的只能刷新一个数据表格。如下图，当搜索药品的时候只刷新左表，当搜索器材的时候只刷新右表。
在这里插入图片描述
通过上网查询资料和看layui的开发文档，最终实现效果，实现过程如下：
我的表格渲染方式采用的是方法级渲染。

1、html代码

<div class="layui-fluid yk-jiezhenc" style="width: 36%;">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 65px;padding: 5px 10px;">药品</label>
                            <div class="layui-input-block" style="margin-left: 65px;">
                                <input type="text" id="drugname" class="layui-input" placeholder="请输入药品名">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="search" id="searchdrug" lay-filter