Table in dynatable 打印未定义的行

Question

我在我的服务器上安装了 dynatable 插件，我想从 JSON 中写入的数据创建 table。我的 table 脚本：

<table class="table table-striped" id="local-json">
    <thead>
                                  <tr>
                                    <th>Status</th>
                                    <th>MPK</th>
                                    <th>Restaurant Name</th>
                                    <th>Phone Number</th>
                                    <th>Project Start Date</th>
                                    <th>Project End Sales Date</th>
                                    <th>Project Installation Date</th>
                                    <th>Project End Date</th>
                                    <th>General Manager</th>
                                    <th>IT Manager</th>
                                    <th>Edit</th>
                                  </tr>
                                </thead>
<tbody></tbody>
</table>

<script type="text/javascript">
$(document).ready(function(){
var json_url = 'wszystkie_prace.json';
$.getJSON(json_url, function(data) {
    $('#local-json').dynatable({
        dataset: {
            records: JSON.parse(JSON.stringify(data))
        }
    });
});
});
</script>

我的 wszystkie_prace.json 文件如下所示：

[
    {
        "Project Type": "Opening Restaurant",
        "MPK": "108006",
        "Old MPK": "234",
        "Restaurant Name": "PL SBX Restauracja Test1",
        "Phone Number": "+48111222333",
        "Project Start Date": "Apr  6 2016 10:00:00:000PM",
        "Project End Sales Date": "Apr  7 2016 10:00:00:000PM",
        "Project Installation Date": "Apr  6 2016 10:00:00:000PM",
        "Project End Date": "Apr  9 2016 10:00:00:000PM",
        "Restaurant Manager": "Zenon Pietrucha",
        "IT Manager": "Andrzej Marchewka",
        "Notes": "Notatka random sdijbwodenhwoidchwoncdown"
    },
    {
        "Project Type": "Closing Restaurant",
        "MPK": "103120",
        "Old MPK": "2134",
        "Restaurant Name": "PL KFC Restauracja Test2",
        "Phone Number": "+48123123123",
        "Project Start Date": "May  2 2016 06:00:00:000AM",
        "Project End Sales Date": "May  3 2016 08:00:00:000PM",
        "Project Installation Date": "May  7 2016 06:00:00:000AM",
        "Project End Date": "May  8 2016 06:00:00:000AM",
        "Restaurant Manager": "Tomasz Ziemniak",
        "IT Manager": "Andrzej Marchewka",
        "Notes": "sodicmwpd efvwefvwefv wefvwefv wefvwe fv ewfvwe\r\nfvwef\r\nvwe\r\nfv\r\nwefv\r\nwef"
    }
]

我正在关注官方文档 (https://www.dynatable.com/#existing-json)，但我得到的只是一组 undefined。

行数还行，就是不知道怎么处理这个问题

Answer 1

你的代码没问题，你只需要在你的 wszystkie_prace.json 文件中更改关键文字的命名风格，如项目类型等，dyntable 遵循驼峰式大小写来命名 json 中的键，所以当有是一个单词，它全部用小写，例如 MKP as mkp，如果它是多个单词，它应该用驼峰式 eg.Project Type as projectType ，前者是你在 tr 标签中写的，后来是你相应地写的json

中的键

供参考

JSON

[{
    "projectType": "Opening Restaurant",
    "mpk": "108006",
    "oldMpk": "234",
    "restaurantName": "PL SBX Restauracja Test1",
    "phoneNumber": "+48111222333",
    "projectStartDate": "Apr  6 2016 10:00:00:000PM",
    "projectEndSalesDate": "Apr  7 2016 10:00:00:000PM",
    "projectInstallationDate": "Apr  6 2016 10:00:00:000PM",
    "projectEndDate": "Apr  9 2016 10:00:00:000PM",
    "restaurantManager": "Zenon Pietrucha",
    "itManager": "Andrzej Marchewka",
    "notes": "Notatka random sdijbwodenhwoidchwoncdown"
},

//more stuff for other rows

]

HTML

<table class="table table-striped" id="local-json">
<thead>
       <tr>
               <tr>Status</tr> <!--undefined since we didn't supply the value in json-->
               <th>Project Type</th>
               <th>MPK</th>
               <th>Restaurant Name</th>
               <th>Phone Number</th>
               <th>Project Start Date</th>
               <th>Project End Sales Date</th>
               <th>Project Installation Date</th>
               <th>Project End Date</th>
               <th>General Manager</th>
               <th>IT Manager</th>
               <th>Edit</th>
       </tr>
</thead>
<tbody></tbody>
</table>

更新：抱歉我不知道（很久没用过dynatable了）但看起来现在还有4种可用的命名格式。

我建议您使用小写格式，因为我发现它最直接

将脚本更改为

<script type="text/javascript">
$(document).ready(function(){
var json_url = 'wszystkie_prace2.json';
$.getJSON(json_url, function(data) {
$('#local-json').dynatable({
   table: {
       defaultColumnIdStyle: 'lowercase'
   },

   dataset: {
          records: JSON.parse(JSON.stringify(data))
   }
});
});
});
</script>

新 json

[
    {
    "project type": "Opening Restaurant",
    "mpk": "108006",
    "old mpk": "234",
    "restaurant name": "PL SBX Restauracja Test1",
    "phone number": "+48111222333",
    "project start date": "Apr  6 2016 10:00:00:000PM",
    "project end sales ate": "Apr  7 2016 10:00:00:000PM",
    "project installation date": "Apr  6 2016 10:00:00:000PM",
    "project end date": "Apr  9 2016 10:00:00:000PM",
    "restaurant manager": "Zenon Pietrucha",
    "it manager": "Andrzej Marchewka",
    "notes": "Notatka random sdijbwodenhwoidchwoncdown",
    "general manager" : "mr .cool",
    "status" : "Active"
    }
]

如果愿意探索其他命名格式 https://www.dynatable.com/#converting-attribute-names

Table in dynatable 打印未定义的行

Table in dynatable prints rows of undefined

javascript

html

json

dynatable