javascript - 使用 GET 请求动态填充表

Question

一张空 table 。要填充产品表，应使用 JavaScript 动态创建其内容以将数据插入表中。应从网络服务器请求数据。您应该首先向 Web 服务发送 AJAX GET 请求。当此请求成功返回时，您应该使用 DOM 将返回的 JSON 数据插入到您的表中

Answer 1

您可以尝试datatable插件来满足您的场景

要使用此功能，您的数据应采用以下格式

    {   "draw": 1,   "recordsTotal": 57,   "recordsFiltered": 57,   "data": [
        [
          "Airi",
          "Satou",
          "Accountant",
          "Tokyo",
          "28th Nov 08",
          "$162,700"
        ],
        [
          "Angelica",
          "Ramos",
          "Chief Executive Officer (CEO)",
          "London",
          "9th Oct 09",
          "$1,200,000"
        ], 
      ] 
  }

HTML 代码

    <table id="example" class="display" style="width:100%">
<thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
    <table>

JS 代码:

$(document).ready(function() {
    $('#example').DataTable( {
        
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

也包括以下脚本

https://code.jquery.com/jquery-3.3.1.js

https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js