jquery - 在数据表中设置来自Web服务的Json数据

Question

我必须将从 Web 服务返回的数据设置到数据表 HTML 表中。给出了代码。我尝试设置列，但这不起作用，显示“表中没有可用数据”。

HTML

     <table id="example" cellspacing="0" width="100">
                    <thead class="scrollmenu">
                        <tr>
                            <th>Sr.#</th>
                            <th>Reference</th>
                            <th>Type</th>
                            <th>Value Date</th>
                            <th>Amount</th>
                            <th>Transaction Type</th>
                            <th>Sender Bic</th>
                            <th>Receiver Bic</th>
                            <th>Receiver Account</th>
                            <th>Sender Account</th>
                            <th>Sender</th>
                            <th>Receiver</th>
                            <th>Payer's Participant</th>
                            <th>Beneficiary Participant</th>
                            <th>Creation Date</th>
                        </tr>
                    </thead>


                    <tbody>
                    </tbody>
                </table>

JavaScript

var datefrom = $('#dateFrom').val();
    var dateto = $('#dateTo').val();
    $.ajax({
        type: "POST",
        url: "/DashBoard/fetchDataDetails?flag="+flag+"&from=" + datefrom + "&" + "to=" + dateto,
         contentType: "application/json; charset=utf-8",
        success: function (data) {
            debugger;
            if (data.length > 0) {
                debugger;
                var abc = data;
                $('#example').DataTable({
                    "paging": true,
                    "ordering": true,
                    "info": true,
                    "columns": [
                        { "data": "system_reference_no" },
                        { "data": "mt_type" },
                        { "data": "system_refdate" },
                        { "data": "system_refamount" },
                        { "data": "TransType_Code" },
                        { "data": "sender" },
                        { "data": "receiver" },
                        { "data": "receiver_account" },
                        { "data": "sender_account" },
                        { "data": "sender_bic" },
                        { "data": "receiver_bic" },
                        { "data": "sender_bank" },
                        { "data": "receiver_bank" },
                        { "data": "creation_date" },
                    ]
                });

            }
            //  processingGif(false);
        },
        error: function (data) {
            // processingGif(false);
        }



    });

但这不起作用。我尝试了不同的选项，但无法使其发挥作用。需要帮助。

Answer 1

您需要使用 data 将数据传递到 DataTable选项。

$('#example').DataTable({
   // ... skipped ...
   "data": data 
});