javascript - 如何在DataTable View 中显示json数据？

Question

我正在尝试显示大量 json 数据。我正在尝试复制该方法 here使用我自己的数据。数据存储在隐藏容器中。

我的 HTML:

<div id="div_permintaan" class="ibox-content" style="width:90%; margin-left:5%; margin-right:5%;">
<table width="100%" cellpadding="5" cellspacing="0" id="tbl_list_permintaan" class="table table-striped table-bordered table-hover dataTables" border="0">
<thead>     
    <tr>
        <th>No.</th>
        <th>id</th>
        <th>date</th>               
        <th>unit</th>
        <th>note</th>
        <th>Status</th>
    </tr>
</thead>    
</table>
<textarea id="container-permintaan"><?php echo json_encode($permintaan); ?></textarea>
</div>

我当前的jquery:

$('.dataTables').DataTable( {
    serverSide  : true,
    ordering    : false,
    searching   : false,
    ajax: function (data, callback, settings) {


        setTimeout( function () {
            callback( {
                draw: data.draw,
                data: JSON.parse($('#container-permintaan').val())
            } );
        }, 50 );


    },
    scrollY: 200,
    scroller: {
        loadingIndicator: true
    }
} )

部分数据:

[{"id":"CEK530","date":"05\/09\/2007","unit":"KC JAKARTA HASANUDIN","note":"G.239101-G.240100","status":"3"},{"id":"05\/10\/16 kedoya","date":"10\/05\/2016","unit":"KCP JAKARTA KEDOYA","note":"","status":"3"},{"id":"110116","date":"11\/07\/2016","unit":"KC PATI","note":"","status":"3"},{"id":"18\/1551-3\/042","date":"14\/07\/2016","unit":"KC BANDARLAMPUNG","note":"","status":"3"},{"id":"18\/368-3\/306","date":"19\/07\/2016","unit":"KCP BULELENG","note":"","status":"3"},{"id":"18\/1221-3\/402","date":"27\/07\/2016","unit":"KC LHOKSEUMAWE","note":"","status":"3"},{"id":"18\/1264-3\/ID00100012","date":"02\/08\/2016","unit":"KC PEKALONGAN","note":"","status":"3"},{"id":"18\/1385-3\/322","date":"02\/08\/2016","unit":"KCP TANJUNG BALAI KARIMUN","note":"","status":"3"},{"id":"18\/834-3\/571","date":"03\/08\/2016","unit":"KCP PEKALONGAN KAJEN","note":"","status":"3"},{"id":"04\/08\/16 tendean","date":"04\/08\/2016","unit":"KCP JAKARTA TENDEAN","note":"","status":"3"},{"id":"18\/078-3\/648","date":"04\/08\/2016","unit":"KCP JAKARTA TENDEAN","note":"","status":"3"},{"id":"017\/057-I\/2016","date":"09\/08\/2016","unit":"KC DUMAI","note":"","status":"3"},{"id":"BG1","date":"09\/08\/2016","unit":"KCP JAKARTA MENTENG","note":"T.062151-T.063150","status":"2"},{"id":"CEK1","date":"09\/08\/2016","unit":"KCP JAKARTA MENTENG","note":"F.633101-F.634100","status":"3"},{"id":"CEK10","date":"09\/08\/2016","unit":"KCP PASURUAN","note":"F.642101-F.643100","status":"3"},{"id":"CEK11","date":"09\/08\/2016","unit":"KC MAKASSAR","note":"F.643101-F.644100","status":"3"},{"id":"CEK12","date":"09\/08\/2016","unit":"KCP BANJAR","note":"F.644101-F.645100","status":"3"},{"id":"CEK13","date":"09\/08\/2016","unit":"KCP YOGYAKARTA KATAMSO","note":"F.645101-F.646100","status":"3"},{"id":"CEK2","date":"09\/08\/2016","unit":"KC JAKARTA THAMRIN","note":"F.634101-F.635100","status":"3"},{"id":"CEK3","date":"09\/08\/2016","unit":"KC MEDAN AKSARA","note":"F.635101-F.636100","status":"3"},{"id":"CEK4","date":"09\/08\/2016","unit":"KC BATURAJA","note":"F.636101-F.637100","status":"3"},{"id":"CEK5","date":"09\/08\/2016","unit":"KCP CIAMIS","note":"F.637101-F.638100","status":"3"},{"id":"CEK6","date":"09\/08\/2016","unit":"KCP SAMARINDA HASAN BASRI","note":"F.638101-F.639100","status":"3"},{"id":"CEK7","date":"09\/08\/2016","unit":"KCP BANDUNG UJUNG BERUNG","note":"F.639101-F.640100","status":"3"},{"id":"CEK8","date":"09\/08\/2016","unit":"KC TEGAL","note":"F.640101-F.641100","status":"3"},{"id":"20\/027-3\/202","date":"19\/01\/2018","unit":"KCP BALIKPAPAN KEBUN SAYUR","note":"","status":"1"},{"id":"20\/043-3\/184","date":"19\/01\/2018","unit":"KCP SURABAYA KLAMPIS","note":"","status":"1"}]

Answer 1

$('.dataTables').DataTable( {
    serverSide  : true,
    ordering    : false,
    searching   : false,
    ajax: function (data, callback, settings) {
        
        var jdata = JSON.parse($('#container-permintaan').val())
        var data = []
        var i=0
        jdata.map((d) => {
          var returned = [i++]
          var values = Object.values(d)
          returned.push(...values)
          data.push(returned)
        })
        setTimeout( function () {
            callback( {
                draw: data.draw,
                data: data,
                recordsTotal: data.length,
                recordsFiltered: data.length
            } );
        }, 50 );


    },
    scrollY: 200,
    scroller: {
        loadingIndicator: true
    }
} )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<div id="div_permintaan" class="ibox-content" style="width:90%; margin-left:5%; margin-right:5%;">
<table width="100%" cellpadding="5" cellspacing="0" id="tbl_list_permintaan" class="table table-striped table-bordered table-hover dataTables" border="0">
<thead>     
    <tr>
        <th>No.</th>
        <th>id</th>
        <th>date</th>               
        <th>unit</th>
        <th>note</th>
        <th>status</th>
    </tr>
</thead>    
</table>
<textarea id="container-permintaan">[{"id":"CEK530","date":"05\/09\/2007","unit":"KC JAKARTA HASANUDIN","note":"G.239101-G.240100","status":"3"},{"id":"05\/10\/16 kedoya","date":"10\/05\/2016","unit":"KCP JAKARTA KEDOYA","note":"","status":"3"},{"id":"110116","date":"11\/07\/2016","unit":"KC PATI","note":"","status":"3"},{"id":"18\/1551-3\/042","date":"14\/07\/2016","unit":"KC BANDARLAMPUNG","note":"","status":"3"},{"id":"18\/368-3\/306","date":"19\/07\/2016","unit":"KCP BULELENG","note":"","status":"3"},{"id":"18\/1221-3\/402","date":"27\/07\/2016","unit":"KC LHOKSEUMAWE","note":"","status":"3"},{"id":"18\/1264-3\/ID00100012","date":"02\/08\/2016","unit":"KC PEKALONGAN","note":"","status":"3"},{"id":"18\/1385-3\/322","date":"02\/08\/2016","unit":"KCP TANJUNG BALAI KARIMUN","note":"","status":"3"},{"id":"18\/834-3\/571","date":"03\/08\/2016","unit":"KCP PEKALONGAN KAJEN","note":"","status":"3"},{"id":"04\/08\/16 tendean","date":"04\/08\/2016","unit":"KCP JAKARTA TENDEAN","note":"","status":"3"},{"id":"18\/078-3\/648","date":"04\/08\/2016","unit":"KCP JAKARTA TENDEAN","note":"","status":"3"},{"id":"017\/057-I\/2016","date":"09\/08\/2016","unit":"KC DUMAI","note":"","status":"3"},{"id":"BG1","date":"09\/08\/2016","unit":"KCP JAKARTA MENTENG","note":"T.062151-T.063150","status":"2"},{"id":"CEK1","date":"09\/08\/2016","unit":"KCP JAKARTA MENTENG","note":"F.633101-F.634100","status":"3"},{"id":"CEK10","date":"09\/08\/2016","unit":"KCP PASURUAN","note":"F.642101-F.643100","status":"3"},{"id":"CEK11","date":"09\/08\/2016","unit":"KC MAKASSAR","note":"F.643101-F.644100","status":"3"},{"id":"CEK12","date":"09\/08\/2016","unit":"KCP BANJAR","note":"F.644101-F.645100","status":"3"},{"id":"CEK13","date":"09\/08\/2016","unit":"KCP YOGYAKARTA KATAMSO","note":"F.645101-F.646100","status":"3"},{"id":"CEK2","date":"09\/08\/2016","unit":"KC JAKARTA THAMRIN","note":"F.634101-F.635100","status":"3"},{"id":"CEK3","date":"09\/08\/2016","unit":"KC MEDAN AKSARA","note":"F.635101-F.636100","status":"3"},{"id":"CEK4","date":"09\/08\/2016","unit":"KC BATURAJA","note":"F.636101-F.637100","status":"3"},{"id":"CEK5","date":"09\/08\/2016","unit":"KCP CIAMIS","note":"F.637101-F.638100","status":"3"},{"id":"CEK6","date":"09\/08\/2016","unit":"KCP SAMARINDA HASAN BASRI","note":"F.638101-F.639100","status":"3"},{"id":"CEK7","date":"09\/08\/2016","unit":"KCP BANDUNG UJUNG BERUNG","note":"F.639101-F.640100","status":"3"},{"id":"CEK8","date":"09\/08\/2016","unit":"KC TEGAL","note":"F.640101-F.641100","status":"3"},{"id":"20\/027-3\/202","date":"19\/01\/2018","unit":"KCP BALIKPAPAN KEBUN SAYUR","note":"","status":"1"},{"id":"20\/043-3\/184","date":"19\/01\/2018","unit":"KCP SURABAYA KLAMPIS","note":"","status":"1"}]</textarea>
</div>