我正在使用DataTable构建一个嵌套表。
该表是从我从Ajax调用获得的JSON字符串str构建的。
在JSON.parse之前str ：
"[ {\r\n \"ente\" : \"Roma\",\r\n \"cup\" : \"ABCDE3593CXXE\",\r\n \"decretoImpegno\" : \"decreto singolo\",\r\n \"dataDecretoImpegno\" : 61415276400000,\r\n \"importoImpegno\" : 56000,\r\n \"finanziatoMiur\" : 343434,\r\n \"importoPagato\" : 55656,\r\n \"importoInPagamento\" : 9999,\r\n \"details\" : [ {\r\n \"progressivoPagamento\" : 22,\r\n \"dataDecreto\" : 61415276400000,\r\n \"numeroDecretoPagamento\" : \"numero dec pag\",\r\n \"tipoPagamento\" : \"tipo pag\",\r\n \"importoInPagamento\" : 45,\r\n \"notaDecreto\" : \"nota dec\"\r\n }, {\r\n \"progressivoPagamento\" : 22,\r\n \"dataDecreto\" : 61415276400000,\r\n \"numeroDecretoPagamento\" : \"numero dec pag\",\r\n \"tipoPagamento\" : \"tipo pag\",\r\n \"importoInPagamento\" : 45,\r\n \"notaDecreto\" : \"nota dec\"\r\n } ]\r\n}, {\r\n \"ente\" : \"Roma\",\r\n \"cup\" : \"ABCDE3593CXXE\",\r\n \"decretoImpegno\" : \"decreto singolo\",\r\n \"dataDecretoImpegno\" : 61415276400000,\r\n \"importoImpegno\" : 56000,\r\n \"finanziatoMiur\" : 343434,\r\n \"importoPagato\" : 55656,\r\n \"importoInPagamento\" : 9999,\r\n \"details\" : [ {\r\n \"progressivoPagamento\" : 22,\r\n \"dataDecreto\" : 61415276400000,\r\n \"numeroDecretoPagamento\" : \"numero dec pag\",\r\n \"tipoPagamento\" : \"tipo pag\",\r\n \"importoInPagamento\" : 45,\r\n \"notaDecreto\" : \"nota dec\"\r\n }, {\r\n \"progressivoPagamento\" : 22,\r\n \"dataDecreto\" : 61415276400000,\r\n \"numeroDecretoPagamento\" : \"numero dec pag\",\r\n \"tipoPagamento\" : \"tipo pag\",\r\n \"importoInPagamento\" : 45,\r\n \"notaDecreto\" : \"nota dec\"\r\n } ]\r\n} ]"
之后，我将此字符串解析为JSON：str = JSON.parse(str)。
然后，我将str传递给DataTable：
var oTable = $('#exampleTable').dataTable({
"bJQueryUI": true,
"aaData": str,
...
但是，我收到一个错误：
DataTables警告：table id = exampleTable - 第0行请求的未知参数'ente'。有关此错误的详细信息，请参阅http://datatables.net/tn/4
在解析str字符串之前发生奇怪的事情：
（1）我在我的网络控制台中用console.log(str);显示它。
（2）我将console.log的结果复制到js变量中。
var res = [ { //this JSON is exactly what I get from Ajax, the same I parsed..
"ente" : "Roma",
"cup" : "ABCDE3593CXXE",
"decretoImpegno" : "decreto singolo",
"dataDecretoImpegno" : 61415276400000,
"importoImpegno" : 56000,
"finanziatoMiur" : 343434,
"importoPagato" : 55656,
"importoInPagamento" : 9999,
"details" : [ {
"progressivoPagamento" : 22,
"dataDecreto" : 61415276400000,
"numeroDecretoPagamento" : "numero dec pag",
"tipoPagamento" : "tipo pag",
"importoInPagamento" : 45,
"notaDecreto" : "nota dec"
}],
"importoDaPagare" : 277779
}, {
"ente" : "Roma",
"cup" : "ABCDE3593CXXE",
"decretoImpegno" : "decreto singolo",
"dataDecretoImpegno" : 61415276400000,
"importoImpegno" : 56000,
"finanziatoMiur" : 343434,
"importoPagato" : 55656,
"importoInPagamento" : 9999,
"details" : [ {
"progressivoPagamento" : 22,
"dataDecreto" : 61415276400000,
"numeroDecretoPagamento" : "numero dec pag",
"tipoPagamento" : "tipo pag",
"importoInPagamento" : 45,
"notaDecreto" : "nota dec"
} ],
"importoDaPagare" : 277779
} ];
（3）我将此变量传递给DataTable（不解析它）并且工作!!
var oTable = $('#exampleTable').dataTable({
"bJQueryUI": true,
"aaData": res,
...
怎么可能？
Datatable.js
detailsTableHtml = $("#detailsTable").html();
//Insert a 'details' column to the table
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<img src="http://i.imgur.com/SD7Dz.png">';
nCloneTd.className = "center";
$('#exampleTable thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
$('#exampleTable tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});
//Initialse DataTables, with no sorting on the 'details' column
var oTable = $('#exampleTable').dataTable({
"bJQueryUI": true,
"aaData": res,
"bPaginate": true,
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": '<img src="http://i.imgur.com/SD7Dz.png">'
},
{ "mDataProp": "ente" },
{ "mDataProp": "cup" },
{ "mDataProp": "decretoImpegno" },
{ "mDataProp": "dataDecretoImpegno" },
{ "mDataProp": "importoImpegno" },
{ "mDataProp": "finanziatoMiur" },
{ "mDataProp": "importoPagato" },
{ "mDataProp": "importoInPagamento" }
],
"oLanguage": {
"sInfo": "_TOTAL_ entries"
},
"aaSorting": [[1, 'asc']]
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#exampleTable tbody td img').on('click', function () {
var nTr = $(this).parents('tr')[0];
var nTds = this;
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
this.src = "http://i.imgur.com/SD7Dz.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
var rowIndex = oTable.fnGetPosition( $(nTds).closest('tr')[0] );
var detailsRowData = res[rowIndex].details;
this.src = "http://i.imgur.com/d4ICC.png";
oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'detail');
oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
"bJQueryUI": true,
"bFilter": true,
"aaData": detailsRowData,
"bSort" : true, // disables sorting
"aoColumns": [
{ "mDataProp": "progressivoPagamento" },
{ "mDataProp": "dataDecreto" },
{ "mDataProp": "numeroDecretoPagamento" },
{ "mDataProp": "tipoPagamento" },
{ "mDataProp": "importoInPagamento" },
{ "mDataProp": "notaDecreto" }
],
"bPaginate": true,
"oLanguage": {
"sInfo": "_TOTAL_ entries"
}/*,
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var imgLink = aData['pic'];
var imgTag = '<img width="100px" src="' + imgLink + '"/>';
$('td:eq(0)', nRow).html(imgTag);
return nRow;
}*/
});
iTableCounter = iTableCounter + 1;
}
});
解决方案：我错过了将dataType: 'json'添加到aJax调用中...