【问题标题】:Passing client-side JSON to dataTable - syntax?将客户端 JSON 传递给 dataTable - 语法?
【发布时间】:2017-07-31 05:09:13
【问题描述】:

我一直在尝试将 JSON 传递给数据表。

我在脚本的不同点加载 JSON,然后截断我需要的部分并将其传递给应该呈现表格的函数。 功能是:

    function populateCasesTable(d){
        var json = d.cases;
        var cols = [
            {  "data"   :  json.service_area},
            {  "data"   :  json.presenting_issue },
            {  "data"   :  json.referred_by },
            {  "data"   :  json.date_opened },
            {  "data"   :  json.case_status },
            {  "data"   :  json.preferred_staff }
        ];

        console.log(json);

        $('#cases_table').DataTable( {
           "data": json,
           "columns": cols
        } );
    }

表格的 HTML 是

<table  id='cases_table' width="100%">
    <thead>
    <tr>
        <th>Service Area</th>
        <th>Presenting Issue</th>
        <th>Referred by</th>
        <th>Date opened</th>
        <th>Status</th>
        <th>Preferred Staff</th>
    </tr>
    </thead>

</table>

console.log 输出返回正确数量的对象 (12),单个对象看起来像:

    0 Object: 
    action:9
    case_status:"Open"
    date_created:"11/07/2017"
    date_opened:"11/07/2017"
    file:5
    id:31646
    issues:8
    preferred_staff:"Doc Kuran"
    presenting_issue:"Anxiety Disorder"
    referral:0
    referred_by:"Academic staff"
    serviceAreaId:14
    service_area:"Disability Services"
    staff:0

我得到了正确数量的页面,并伴随着神秘的“DataTables 警告:table id=cases_table - Requested unknown parameter '0' for row 0, column 0”。有关此错误的更多信息,请参阅http://datatables.net/tn/4'弹出窗口。

我确定这是一个配置问题,但我无法解决这个问题。

我错过了什么?

谢谢。

【问题讨论】:

    标签: json datatables client-side


    【解决方案1】:

    我找到了。 Cols 必须设置如下:

     var cols = [
                {  "data"   :  'service_area'},
                {  "data"   :  'presenting_issue' },
                {  "data"   :  'referred_by' },
                {  "data"   : 'date_opened' },
                {  "data"   : 'case_status' },
                {  "data"   : 'preferred_staff' }
            ];
    

    【讨论】:

      猜你喜欢
      • 2023-03-29
      • 2018-08-13
      • 2019-04-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-01-10
      • 2019-03-16
      • 2011-07-01
      相关资源
      最近更新 更多