如何在DataTable视图中显示json数据？

时间：2018-01-19 08:30:27

标签： javascript php jquery json datatables

我正在尝试显示一个大的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"}]

2 个答案:

答案 0 :(得分：1)

传递给回调的数据需要是一个数组数组，如下所示：

[ 
    [
        1, // for the column No.
        "CEK530",
        "05\/09\/2007",
        "KC JAKARTA HASANUDIN",
        "G.239101-G.240100",
        "3"
    ], //...
]

而不是之前使用的对象数组：

[
    {
    "id": "CEK530",
    "date": "05\/09\/2007",
    "unit": "KC JAKARTA HASANUDIN",
    "note": "G.239101-G.240100",
    "status": "3"
    },//...
]

＆＃13;
＆＃13; 
$('.dataTables').DataTable( {
    serverSide  : true,
    ordering    : false,
    searching   : false,
    ajax: function (data, callback, settings) {
        var out = [], data = JSON.parse($('#container-permintaan').val()), i;

        for (i in data) {
            out.push([
            		i,
                data[i].id,
                data[i].date,
                data[i].unit,
                data[i].note,
                data[i].status                
            ]);
        }

        setTimeout( function () {
            callback( {
                draw: data.draw,
                data: out,
                recordsTotal: out.length,
                recordsFiltered: out.length
            } );
        }, 50 );


    },
    scrollY: 200,
    scroller: {
        loadingIndicator: true
    }
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.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 style="display:none;" 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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

＆＃13;
＆＃13; 
$('.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
    }
} )
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题