数据表 - 将 JSON 数据加载到表中

Question

我正在使用数据表，并且我有来自 API 的数据，我该如何填充我的表？响应采用 JSON 密钥对格式

{
    "site": "SITE A",
    "sent": "141558",
    "open": "470",
    "click": "0",
    "delivered": "0",
},
{
        "site": "SITE B",
        "sent": "141558",
        "open": "470",
        "click": "0",
        "delivered": "0",
    },

HTML

<table id="example" class="table datatable-basic table-bordered table-striped table-hover" width="100%" cellspacing="0" style="text-align:center;">
  <thead style="text-align:center;background-color:#BE1E2D; color:white">
                       <tr>
                                <th>Site Visited</th>
                                <th>Sent</th>
                                <th>Open</th>
                                <th>Clicked</th>
                                <th>Delivered</th>
                            </tr>
                            </thead>

                        </table>

Javascript

$('#getData').on('click', function () {

        $('#example').DataTable( {
            "ajax": 'http://localhost/API/index.php'
        } );
    });

Answer 1

如果你从 api 获取对象数组，你应该使用 columns 属性，如果它是一个发布请求，你也应该指定：

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": {
             "url": "http://localhost/API/index.php",
             "type": "POST"
         },
        "columns": [
            { "data": "site" },
            { "data": "sent" },
            { "data": "open" },
            { "data": "click" },
            { "data": "delivered" }
        ]
    } );
} );

Answer 2

将您的 JavaScript 更改为如下所示：

$('#example').DataTable( {
        "ajax": "http://localhost/API/index.php",
        "columns": [
            { "data": "site" },
            { "data": "sent" },
            { "data": "open" },
            { "data": "click" },
            { "data": "delivered" }           
        ]
    } );