所以我正在使用jQuery子行在父行中显示一些数据。最初通过Ajax显示之后，我执行了另一个Ajax请求并更改了数据表中的数据。现在，如果我尝试扩展它，它将显示行。但是，如果我再次尝试更改数据表中的数据，则会显示d未定义。
这是我最初在数据表中加载数据时的代码。
$.ajax({
url: "GetGridDetails?decodeID="+decoderFileSelected,
type: "GET",
dataType: 'json',
success: function (myData) {
if(myData != null){
console.log("my data is:"+myData);
var table = $('#dashNumTable').DataTable({
destroy: true,
data: myData ,
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "S" },
{ "data": "W" },
{ "data": "SA" },
{ "data": "DDS" },
{ "data": "AAS" },
{ "data": "ABS" },
{ "data": "BIN" },
{ "data": "ET" }
],
"order": [[1, 'asc']]
});
// Add event listener for opening and closing details
$('#dashNumTable tbody').on('click', 'td.details-control', function () {
//alert("clicked plus!");
var tr = $(this).closest('tr');
var row = table.row(tr);
//var row = $('#dashNumTable').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
}//if code ends..
else{
alert("There are no base numbers for the selected decoder ring file...");
}
} //end of success function...
});
这会生成带有加号按钮以展开和减号按钮收缩的表格。
触发ajax事件时刷新和添加新数据的代码。
$(document).on("click", "#showHGAPartBtn", function(){
// clear the eixisting table contents
//alert("show button clicked!");
var decoderFileSelected = $("#decoderFile").val();
//$('#dashNumTable').empty();
// var clearTable = $('#dashNumTable').DataTable();
// clearTable.clear().draw();
//clearTable.rows().remove();
$('#dashNumTable').DataTable().ajax.reload();
//get the fresh data..
$.ajax({
url: "GetGridDetails?decodeID="+decoderFileSelected,
type: "GET",
dataType: 'json',
success: function (data) {
//if(myData != null){
//console.log("my data is:"+myData);
var table = $('#dashNumTable').DataTable({
// destroy: true,
cache: false,
processing: true,
data: data ,
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "S" },
{ "data": "W" },
{ "data": "SA" },
{ "data": "DDS" },
{ "data": "AAS" },
{ "data": "ABS" },
{ "data": "BIN" },
{ "data": "ET" }
],
"order": [[1, 'asc']]
});
// Add event listener for opening and closing details
// $('#dashNumTable').on('click', 'tbody td.details-control', function () {
$('#dashNumTable').delegate('tbody td.details-control', 'click', function () {
//alert("clicked plus!");
var tr = $(this).closest('tr');
//table.ajax.reload();
var row = table.row(tr);
// alert("Row is :"+row);
//var row = $('#dashNumTable').DataTable().row(tr);
console.log(tr);
console.log(row);
console.log(row.child.isShown());
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
// }//if code ends..
// else{
// alert("There are no base numbers for the selected decoder ring file...");
//}
},
//end of success function...
error: function(response){
console.log(response);
}
});// end of AJAX call
这里是格式化函数，它会在秒时间返回错误。
function format (d) {
//alert(d.stringify);
//alert(JSON.stringify(d));
var rowSelectedBaseNumbers = d.HGA_BASE_NUMBERS;
// `d` is the original data object for the row
//alert(rowSelectedBaseNumbers);
var selectedBaseNumbersDropdown = $("#selBaseNumbers").val();
var initial = "<table cellpadding='0' cellspacing='0' class='innerDataTbl'><tr class='shown'> <th>Dash No.</th> <th>Heads</th>";
var finalReturn = "";
var endHeaders = "</tr>";
var middleContentHeaders = "";
//iterate over the base numbers now
for(var i=0;i< selectedBaseNumbersDropdown.length; i++){
middleContentHeaders += "<th>"+selectedBaseNumbersDropdown[i]+"</th>";
}
var beginTRCheckboxes = "<tr><td>"+d.DIGIT+0+","+d.DIGIT+1+"</td><td>Up,Dn</td>";
var endTRCheckboxes = "</tr>";
var endTable = "</table>";
//iterate over the total base numbers again to create respective checkboxes
var checkboxes = "";
for(var i=0;i< selectedBaseNumbersDropdown.length; i++){
//is the selected base number already selected?
if($.inArray(selectedBaseNumbersDropdown[i], rowSelectedBaseNumbers) == -1){
//not found
//display checkbox as it is
checkboxes += "<td><input type='checkbox'/></td>";
}
else{
//found
//mark checkbox already selected
checkboxes += "<td><input type='checkbox' checked='checked' disabled/></td>"
}
}
//generate final return now
finalReturn = initial+middleContentHeaders+endHeaders+beginTRCheckboxes+checkboxes+endTRCheckboxes+endTable;
return finalReturn;
}
返回的错误是
typeerror-d未定义
答案 0 :(得分：1)
在您的格式函数中创建一个failSafe方案，以确保每当没有可用数据时，代码将不会执行。
function format (d) {
if (d) { return null; }
...
}
确定代码
row.data（）
实际上返回值吗？ =>尝试找出答案。
另外，d是什么？尝试使您的代码尽可能容易阅读。我们开发人员是作家。不是为了计算机，而是为了我们的同事，有时他们需要阅读我们的代码以了解我们正在努力实现的目标。