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

【问题标题】：How to display json data in DataTable view?如何在 DataTable 视图中显示 json 数据？
【发布时间】：2018-01-19 08:30:27
【问题描述】：

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

【问题讨论】：

    标签： javascript php jquery json datatables


    【解决方案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>

    【讨论】：

      【解决方案2】：

      传递给回调的数据需要是数组数组，像这样：

      [ 
    [
        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"
    },//...
]


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

      【讨论】：

        猜你喜欢
        • 2018-04-26
        • 2020-01-06
        • 2017-11-30
        • 2020-10-10
        • 1970-01-01
        • 1970-01-01
        • 2020-05-12
        • 2020-02-17
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode