jQuery 具有动态列的数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28140671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables with Dynamic Columns
提问by New Dawn Fades
I'm trying to render a datatable with dynamic columns using JSON but keep getting the following error:
我正在尝试使用 JSON 呈现带有动态列的数据表，但不断收到以下错误：
Uncaught TypeError: Cannot read property 'length' of undefined.
Any help would be greatly appreciated.
任何帮助将不胜感激。
Thanks!!
谢谢！！
JS:
JS：
<link href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.js" type="text/javascript"></script>
jQuery(document).ready(function() {
var dataObject = '[{"COLUMNS":[{ "sTitle": "NAME"}, { "sTitle": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]';
var columns = [];
jQuery.each(dataObject.COLUMNS, function(i, value){
var obj = { sTitle: value };
columns.push(obj);
});
jQuery('#example').dataTable({
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"aaData": dataObject.DATA,
"aoColumns": columns
});
});
HTML:
HTML：
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<tr><thead>column1</thead></tr>
<tbody></tbody>
</table>
回答by user619237
Hi there are several issue in the code...
嗨，代码中有几个问题...
- dataObject is string, not a json. so you can make it json object using eval() or removing '
- the parameter name you are passing in datatable is wrong. you need to provide the accurate parameter.
- You are using the parent json object as array. but you are not using [] to get its first element.
- your html content is the table is wrong. since you are passing the columns name using java script. you dont need the html table headers. the length error actually occurring because of this html code. if you remove the html inside the tables then your code will not have the length error. but still the above error i mentioned will be there. please check the code bellow. may be you are looking for this code...
- dataObject 是字符串，而不是 json。因此您可以使用 eval() 或删除 ' 使其成为 json 对象
- 您在数据表中传递的参数名称是错误的。您需要提供准确的参数。
- 您正在使用父 json 对象作为数组。但是您没有使用 [] 来获取它的第一个元素。
- 您的 html 内容是表格错误。因为您正在使用 java 脚本传递列名称。您不需要 html 表格标题。由于此 html 代码而实际发生的长度错误。如果您删除表格内的 html，那么您的代码将不会出现长度错误。但我提到的上述错误仍然存在。请检查下面的代码。可能是您正在寻找此代码...
jQuery(document).ready(function() {
var dataObject = eval('[{"COLUMNS":[{ "title": "NAME"}, { "title": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]');
var columns = [];
$('#example').dataTable({
"data": dataObject[0].DATA,
"columns": dataObject[0].COLUMNS
});
});<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
</table>回答by Bikal Basnet
I think life would have been easier with with this
我认为有了这个，生活会更轻松
jQuery(document).ready(function() {
var dataObject = {
columns: [{
title: "NAME"
}, {
title: "COUNTY"
}],
data: [
["John Doe", "Fresno"],
["Billy", "Fresno"],
["Tom", "Kern"],
["King Smith", "Kings"]
]
};
var columns = [];
$('#example').dataTable({
"data": dataObject.data,
"columns": dataObject.columns
});
});<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">回答by hhk
Those who get a Warning: Requested unknownerror described on https://datatables.net/tn/4, do check your json data format. Below example may help you.
那些收到警告：请求在https://datatables.net/tn/4 上描述的未知错误，请检查您的 json 数据格式。下面的例子可能对你有帮助。
var dataObject = eval('[{"columns":[{ "title": "Id", "data":"Id"}, { "title": "Name", "data":"Name"}],"data":[{"Id":"123","Name":"John Doe Fresno"}, {"Id":"124","Name":"Alice Alicia"}]}]');
$('#example').DataTable(dataObject[0]);
working demo: https://jsfiddle.net/ue6vqy77/
回答by nril
Your declaration of dataObject is for a String, not an object with the properties "COLUMNS" and DATA - remove the '[ at the beginning and '] at the end so you have this (which will be an object):
您对 dataObject 的声明是针对字符串，而不是具有属性“COLUMNS”和 DATA 的对象 - 删除开头的 '[ 和末尾的 '] 这样您就拥有了这个（这将是一个对象）：
var dataObject = {"COLUMNS":[{ "sTitle": "NAME"}, { "sTitle": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]};
