在数据表中设置来自 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 
});