当前位置：网站首页>如何使用layui将数据库中的数据以表格的形式展现出来

如何使用layui将数据库中的数据以表格的形式展现出来

2022-07-01 07:46:00 【抗争的小青年】

layui自带的表格数据渲染

下面的所有操作的前提是你必须引入layui!

一，先写html

<body>
  <div class="layui-card">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="">导航管理</a>
        <a><cite>查看导航</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-inline">
          <button type="button" class="layui-btn layui-btn-danger" style="margin-right: 20px;"><i class="layui-icon layui-icon-delete" style="margin-right:5px;"></i>批量删除</button>
          <div class="layui-input-inline" style="width: 200px;">
            <input type="text" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
          </div>
          <button type="button" class="layui-btn"><i class="layui-icon layui-icon-search" style="margin-right:5px;"></i>搜索</button>
        </div>
      </form>
      <!-- 这里是表格标签 -->
      <table class="layui-table tableRender"></table>
    </div>
  </div>
</body>

注意：这里表格标签的内容是空的。

二，在页面中引入js文件，内容为：

  layui.use(['element', 'table'], function () {
    
    var {
     element, table } = layui

    table.render({
    
      elem: '.tableRender',
      url: "/admin/nav/query",  //后端传数据的接口
      cols: [[ //表头
        {
     field: "nav_id", title: 'ID', width: 80, sort: true, fixed: 'left' },
        {
     field: 'nav_name', title: '导航名称' },
        {
     field: 'nav_alias', title: '导航别名' },
        {
     field: 'nav_sort', title: '导航排序' },
        {
     field: 'nav_is_show', title: '是否展示' },
        {
     field: '', title: '操作' },

      ]],
      page: true
    });

  });

引入table模块，并解构赋值。

三，写后端数据接口，通过查询数据库，来返回数据

//查看导航页面数据
router.get("/query", (req, res) => {
    
  const sql = "SELECT * FROM nav;"
  db.query(sql, (err, results) => {
    
    if (err) {
    
      return res.send({
    
        code: 1,
        msg: err.msg
      })
    }
    if (results.length) {
    

      return res.send({
    

        code: 0,
        msg: "数据查询成功",
        data: results,
        count: 12,     // 这里是记录总条数
      })
    } else {
    
      return res.send({
    
        code: 1,
        msg: "数据信息查询失败"
      })
    }
  })
})