如何从 jquery 中的 json 格式对象填充 html 数据表

Posted 2023-05-08

【中文标题】如何从 jquery 中的 json 格式对象填充 html 数据表

【英文标题】：How to populate html datatable from a json formatted object in jquery

【发布时间】：2021-02-17 19:56:53

【问题描述】：

我在从 json 对象访问数据时遇到问题：

json 对象来自数据库：

   "status":200,
   "remarks":[
      
         "supplier_id":"2020111",
         "supplier_name":"John Doe",
         "contact_number":"sdfsdfsd",
         "date_entry":"2020-11-05 10:04:44"
      ,
      
         "supplier_id":"2020112",
         "supplier_name":"Jerwen Reloz",
         "contact_number":"sd",
         "date_entry":"2020-11-05 10:50:03"
      ,
      
         "supplier_id":"2020113",
         "supplier_name":"Danny Cane",
         "contact_number":"sd",
         "date_entry":"2020-11-05 10:50:07"
      
   ]

我只想用这些数据填充我的html datatable，我正在尝试阅读datatables 文档，但我找不到合适的解决方案。

这是我处理请求的 jquery：

$.ajax(
      type: 'GET',
      url: '/supplier-list',
      dataType: 'json',
      encode: true
)
.done(function (data) 
      console.log(data) //the format defined above
      //i want to populate datatable with this data.
);

还有我的 html 表格：

    <table id="example1" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Supplier ID</th>
            <th>Name</th>
            <th>Contact</th>
            <th>Date Entry</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
    <tfoot>
        <tr>
            <th>Supplier ID</th>
            <th>Name</th>
            <th>Contact</th>
            <th>Date Entry</th>
        </tr>
    </tfoot>
</table>

谢谢。

【问题讨论】：

我正在使用 laravel-8

【参考方案1】：

抱歉，这是修改版。我在 jsfiddle 上测试过

var json = 
   "status":200,
   "remarks":[
      
         "supplier_id":"2020111",
         "supplier_name":"John Doe",
         "contact_number":"sdfsdfsd",
         "date_entry":"2020-11-05 10:04:44"
      ,
      
         "supplier_id":"2020112",
         "supplier_name":"Jerwen Reloz",
         "contact_number":"sd",
         "date_entry":"2020-11-05 10:50:03"
      ,
      
         "supplier_id":"2020113",
         "supplier_name":"Danny Cane",
         "contact_number":"sd",
         "date_entry":"2020-11-05 10:50:07"
      
   ]
;

console.log(json);
  var row;
   
for(var i=0; i<json['remarks'].length; i++) 
    var array = json['remarks'];
    row +=  " <tr>" +
   "                <td> " + array[i].supplier_id   + "</td>" +
   "                <td> " + array[i].supplier_name   + "</td>" +
   "                <td> " + array[i].contact_number   + "</td>" +
   "                <td> " + array[i].date_entry   + "</td>"+
     "</tr>";
    

  var table = 
   " <thead> " +
   "     <tr> " +
   "         <th>Supplier ID</th> " +
   "         <th>Name</th> " +
   "         <th>Contact</th> " +
   "         <th>Date Entry</th> " +
   "     </tr> " +
   " </thead> " +
   " <tbody> " +
   "            <tr> " +    row +  " </tr> " +
   " </tbody> " ;
$('#example1').html(table);

https://jsfiddle.net/e8g254uh/10/