layui点击导航栏下方显示数据表格

layui是一个轻量级的前端 UI 框架，用于快速构建网页应用。在layui中，要实现在导航栏下方显示数据表格的功能，你可以按照以下步骤操作：

1. 首先，在HTML部分，创建一个导航栏并添加一个隐藏的表格容器，例如：

<nav>
  <!-- 导航菜单 -->
</nav>
<div class="hidden" id="table-container">
  <table lay-filter="data-table"></table>
</div>

2. 引入layui.css和layui.js文件，并初始化layui。

3. 编写JavaScript代码，当导航栏某个特定元素被点击时，通过`layEvent`属性处理点击事件，并显示对应的数据表格。这里假设你有一个数组或者服务器返回的数据，可以使用layui的表格组件`layui.table`动态渲染数据：

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

  // 假设有个数据显示数组
  var data = [/* 数据列表 */];

  // 点击导航菜单显示表格
  var navItemClick = function (item) {
    $('#table-container').removeClass('hidden');
    table.render({
      elem: '#data-table',
      data: data,
      // 设置表头、列宽、过滤器等配置
      cols: [...],
      filter: true,
      page: true, // 是否分页
      done: function () { /* 表格加载完成后的回调 */ }
    });
  };

  // 添加导航栏点击监听
  $('.nav-item').click(function () {
    navItemClick(this);
  });
});