当前位置：网站首页>How to use layui to display the data in the database in the form of tables

How to use layui to display the data in the database in the form of tables

2022-07-01 07:48:00 【Struggling young man】

layui Native table data rendering

The premise of all the following operations is that you Must introduce layui!

One , First write html

<body>
  <div class="layui-card">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href=""> Navigation management </a>
        <a><cite> View navigation </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> Batch deletion </button>
          <div class="layui-input-inline" style="width: 200px;">
            <input type="text" placeholder=" Please enter the search content " autocomplete="off" class="layui-input">
          </div>
          <button type="button" class="layui-btn"><i class="layui-icon layui-icon-search" style="margin-right:5px;"></i> Search for </button>
        </div>
      </form>
      <!--  Here is the table label  -->
      <table class="layui-table tableRender"></table>
    </div>
  </div>
</body>

Be careful ： The content of the table label here is empty .

Two , Introduce... Into the page js file , The content is ：

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

    table.render({
    
      elem: '.tableRender',
      url: "/admin/nav/query",  // Interface for back-end data transmission 
      cols: [[ // Header 
        {
     field: "nav_id", title: 'ID', width: 80, sort: true, fixed: 'left' },
        {
     field: 'nav_name', title: ' Navigation name ' },
        {
     field: 'nav_alias', title: ' Navigation alias ' },
        {
     field: 'nav_sort', title: ' Navigation sort ' },
        {
     field: 'nav_is_show', title: ' Whether to show ' },
        {
     field: '', title: ' operation ' },

      ]],
      page: true
    });

  });

introduce table modular , And deconstruct the assignment .

3、 ... and , Write back-end data interface , By querying the database , To return data

// View navigation page data 
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 query successful ",
        data: results,
        count: 12,     //  Here is the total number of records 
      })
    } else {
    
      return res.send({
    
        code: 1,
        msg: " Data information query failed "
      })
    }
  })
})

Write the interface in the corresponding route , The returned data should be in accordance with layui The requirements of to , See the official documents for details .
Back end data interface routing uses express.js build .
Used mysql2 modular , Realize database interaction . there db Is the encapsulated module , Use by introduction , I won't go into details here .

Four , Page rendering successful

Snipaste_2022-06-30_19-58-44