Question

我正在将JavaScript与jQuery DataTables一起使用，但是在将JSON数据加载到Bootstrap表中时遇到了问题。

这是表格的示例

[ { name: 'Bryant Stone',       hobbies: 'Football',       favorite_team: 'Sea hawks',       height: '5 Feet 10 in' },
  { name: 'Jesse Smith',        hobbies: 'boxing',          favorite_team: 'Spurs',           height: '6 feet 6 in' },
  { name: 'Emily Wyclef',       hobbies: 'cooking',         favorite_team: 'Venus Williams',  height: '5 feet 2 in' }
]

在JavaScript中，我以这种格式获取数据并将其放入JavaScript

$(document).ready(function(){
    $(\'#respondent\').dataTable({
        destroy: true,
        data: jsonStr1,
        columns:[   
                {title:"Name", data: "name"},
                {title:"Hobbies", data: "hobbies"},
                {title:"Favorite team" ,data: "favorite_team"},
                {title: "Height" ,data: "height"}
            ]
    });
})

当我加载页面时，它会在控制台中显示我的数据，但“数据表”对话框会显示此消息

DataTable warning table id=respondent-
Requested unknown parameter 'name' for
row0, column 0. For information more.....

我不知道还能做什么。我花了整整一天的时间。任何帮助将不胜感激。

更新感谢所有通过提供一些我已经完成的答案而提供帮助的人。这是我的html

<table class="display" id="respondent">
    <thead>

        <tr>

            <th>Name</th>
            <th>Hobbies</th>
            <th>Favorite Team</th>
            <th>Height</th>
        </tr>

    </thead>
</table>

我已经需要对先前显示的代码进行错字校正但我仍然不断收到此错误消息

DataTables warning: table id=respondent- 
Requested unknown parameter 'name' for 
row 0, column 0, for more information about this 
error, please see http://datatables.net/tn/4

我转到了链接，但没有任何帮助。出现上述消息后，表将被填满在转到某些页面后，我在第一个页面中只看到一个字符仅单元格。那些字母或大括号的字符我不知道在哪里他们来自，因为我什至在我的json数据中都看不到这样的序列数字出现了。它一直困扰着我，我不知道该怎么办。任何帮助将不胜感激。

更新我发现问题在于数据在字符串中。有谁知道如何在不使用eval（）的情况下将javascript中的字符串转换为对象。 JSON.parse返回字符串，而不是要查找的对象。

Answer 1

较小更改：

,在data选项后丢失
该列以 favourite_team （英语）传递，但数据包含 favorite_team （美国英语）
列包含兴趣爱好，其中数据在第一行包含兴趣爱好，而在其他行包含 hobbie 。你要匹配他们。
在各列中使用title选项显示标题名称

信息：该错误/警报通常是由于缺少数据列造成的。

这是修复以上问题的代码段：

$(document).ready(function(){
    
var jsonStr1 = [ { name: 'Bryant Stone',       hobbies: 'Football',       favorite_team: 'Sea hawks',       height: '5 Feet 10 in' },
  { name: 'Jesse Smith',        hobbies: 'boxing',          favorite_team: 'Spurs',           height: '6 feet 6 in' },
  { name: 'Emily Wyclef',       hobbies: 'cooking',         favorite_team: 'Venus Williams',  height: '5 feet 2 in' }
];

    $('#respondent').dataTable({
        destroy: true,
        data: jsonStr1,
        columns:[   
                {title: "name", data: "name"},
                {title: "hobbies", data: "hobbies"},
                {title: "favorite_team", data: "favorite_team"},
                {title: "height", data: "height"}
            ]
    });
})

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>


<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="respondent" class="display">
  <thead>
    
  </thead>
  <tbody>
    
  </tbody>
</table>

希望这会有所帮助。

Answer 2

列名的拼写错误-爱好被称为“ hobbie”，而收藏夹favo u rite_team被称为“ favourite_team”。

为所有对象保留相同的属性名称，以避免该错误

代码示例以供参考-https://codepen.io/nagasai/pen/vzNXPe

HTML：

<table class="display" id="respondent">
    <thead>

        <tr>

            <th>Name</th>
            <th>Hobbies</th>
            <th>Favorite Team</th>
            <th>Height</th>
        </tr>

    </thead>
</table>

JS

var jsonStr1 = [ { name: 'Bryant Stone',  hobbies: 'Football', favorite_team: 'Sea hawks',       height: '5 Feet 10 in' },
  { name: 'Jesse Smith', hobbies: 'boxing', favorite_team: 'Spurs',           height: '6 feet 6 in' },
  { name: 'Emily Wyclef', hobbies: 'cooking',  favorite_team: 'Venus Williams',  height: '5 feet 2 in' }
]

$(document).ready(function() {
 $('#respondent').dataTable({
        destroy: true,
        data: jsonStr1,
        columns:[   
            {title:"Name", data: "name"},
            {title:"Hobbies", data: "hobbies"},
            {title:"Favorite team" ,data: "favorite_team"},
            {title: "Height" ,data: "height"}
        ]
    });
} );

带有DataTables的Javascript JSON数据

2 个答案: