数据表无法从JSON加载数据

时间:2019-06-12 12:27:39

标签: jquery datatable

我正在尝试将Json数据加载到数据表中,但没有加载

请在下面找到数据表代码

function loadItemDetails(jsonData ) {
    $('#itemsDetails').DataTable( {
        mData: jsonData ,
        columns: [
            { data: "netAmount" }
        ]
    } );

在HTML表代码中:

           <table class="table" id="itemsDetails">
                        <thead class="table-head">
                            <tr>
                                <th scope="col">Sr. No.</th>
                                <th scope="col">Qty</th>
                                <th scope="col">Net Amount</th>
                                <th scope="col">Promo</th>
                                <th scope="col">CB</th>
                            </tr>
                        </thead>
                    </table>

Json数据:

var jsonData = [{"netAmount":"20"},{"netAmount":"20"},{"netAmount":"20"}];

3 个答案:

答案 0 :(得分:0)

您需要按以下方式在json对象中转换json:

jsonData = JSON.stringify(jsonData);

希望对您有帮助!

答案 1 :(得分:0)

问题是您使用mData而不是data

function loadItemDetails(jsonData) {
    $('#itemsDetails').DataTable( {
        data: jsonData,
        columns: [
            { data: null },
            { data: null },
            { data: "netAmount" }
        ]
    })
}

loadItemDetails([{"netAmount":"20"},{"netAmount":"20"},{"netAmount":"20"}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table class="table" id="itemsDetails">
  <thead class="table-head">
    <tr>
      <th scope="col">Sr. No.</th>
      <th scope="col">Qty</th>
      <th scope="col">Net Amount</th>
      <th scope="col">Promo</th>
      <th scope="col">CB</th>
    </tr>
  </thead>
</table>

答案 2 :(得分:0)

这对我有用。

var jsonData =  [{"netAmount":"20"},{"netAmount":"20"},{"netAmount":"20"}];
$(document).ready(function() {
    $('#example').DataTable( {
        data : jsonData,
        "columns": [
            { "data": "netAmount" },

        ]
    } );
} );

这里是working Demo

只需记录一下数据表版本