【发布时间】：2019-02-04 08:34:42
【问题描述】：
我正在尝试使用 jquery 数据表制作一个简单的嵌套表。但是现在单击主行以展开详细信息部分后，我在控制台窗口中只收到 404 错误。单击该行中的 id 应分配给详细信息表 ajax 请求，它应该返回数据。有什么猜测吗？
非常感谢。
我的 HTML
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Item 1</th>
<th>Item 2</th>
<th>Item 3</th>
<th>Item 4</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr data-child-value="hidden 1">
<td class="details-control"></td>
<td>
@Html.DisplayFor(modelItem => item.IO_ID)
</td>
<th>
@Html.DisplayFor(model => item.PO_IO_TOPIC)
</th>
<td>
@Html.DisplayFor(modelItem => item.PO_IOU_Client)
</td>
<td>
@Html.DisplayFor(modelItem => item.PO_IO_DOC_NO)
</td>
</tr>
}
</tbody>
我的带有嵌套表的 Jquery
var dd; // to pass header row data to detail table
function format(name, value) {
return '<div><table id="example1" cellspacing="0" width="90%">'+
' <thead>' +
'<tr>' +
'<th></th>' +
'<th>CI 1</th>' +
'<th>CI 2</th>' +
'</tr>'+
'</thead></table></div>';
}
$(document).ready(function () {
var table = $('#example').DataTable({});
// Add event listener for opening and closing details
$('#example').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
row.child(format(tr.data('child-value'))).show();
tr.addClass('shown');
}
alert(table.cell(this, 1).data());
dd = table.cell(this, 1).data(); // asign header id to variable
var table1 = $('#example1').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "PO_Trn_IOU/IocollectionPickup",
"contentType": "application/json; charset=utf-8",
"data": dd , // assign header row id to get detail data
} });
});
});
控制器
public JsonResult IocollectionPickup(string data)
{
POPM_TRN_IOUColection pop = new POPM_TRN_IOUColection();
var iocollection =
from c in db.PO_TR_IOColection
where c.IOID == Convert.ToInt16(data)
select new
{
docno = c.Collection_DocNumber,
date = c.date
};
return Json(iocollection, JsonRequestBehavior.AllowGet);
}
【问题讨论】：
-
看看这部分
"url": "PO_Trn_IOU/IocollectionPickup",确保它是一个有效的 url - 您可能需要指定完整路径） -
仅供参考：您的
<tbody>部分的每一行都有一个重复的<th>。 -
差异我更正了，因为我在过去之后对原始代码进行了一些更改。代码很好，网址正确。我不确定返回数据是否与列计数等详细信息表匹配应该等于数据。这可能是问题吗？
标签： jquery ajax asp.net-mvc datatables