我正在尝试使用jquery数据表创建一个简单的嵌套表。但是现在单击主行展开detais部分后，我在控制台窗口中仅收到404错误。单击时，该行中的ID应分配给detais表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);
}
答案 0 :(得分：0)
这是ASP.NET Fiddler链接https://dotnetfiddle.net/7ilIUT，以查看其工作原理
在这里，我可以使用它，因此您可以比较并找出您做错了什么。注意评论。我将为ASP.NET发布一个JSFiddler类型的链接，因此您可以单击一个链接并看到它的工作。
cshtml
@model IEnumerable<Testy20161006.Controllers.RangeDataView>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index62</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript">
var dd; // to pass header row data to detail table
function format(name, value) {
return '<div id="addToMe" ><table id="example1" cellspacing="0" width="90%">' +
' <thead>' +
'<tr>' +
'<th></th>' +
'<th>CI 1</th>' +
'<th>CI 2</th>' +
'</tr>' +
'</thead>';
}
$(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');
}
dd = table.cell(this, 1).data(); // asign header id to variable
var table1 = $('#example1').DataTable({
"processing": true,
"serverSide": true,
"bProcessing": false,
"ajax": {
//!changed this url to hit my home controller also prefacing with /
//"url": "PO_Trn_IOU/IocollectionPickup",
"url": "/Home/IocollectionPickup",
"contentType": "application/json; charset=utf-8",
//!adding the brackets and title matching c# action
"data": { "theData": dd }, // assign header row id to get detail data
"dataType": "json",
"asynch": false,
"success": function (theData) {
var tbody = $('#example1 tbody')
$.each(theData, function (index, value) {
var row = $("<tr>");
row.append($("<td>").text(value.date));
row.append($("<td>").text(value.docno));
tbody.append(row);
});
}
},
});
});
});
</script>
</head>
<body>
<div id="tempShow" />
<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">
@*adding the click here so user has something to click into*@
<td class="details-control">Click Here to Run Ajax</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>
@*You were missing a table end tag*@
</table>
</body>
</html>
代码
//namespace Testy20161006.Controllers
public class RangeDataView
{
public string IO_ID { get; set; }
public string PO_IO_TOPIC { get; set; }
public string PO_IOU_Client { get; set; }
public string PO_IO_DOC_NO { get; set; }
}
public class POPM_TRN_IOUColection
{
public string docno { get; set; }
public string date { get; set; }
}
public class HomeController : Controller
{
public JsonResult IocollectionPickup(string theData) //!change parm name
{
//you can put a breakpoint here and see theData contains the value passed through ajax
//MOCKING Data so I can show you
//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
// };
List<POPM_TRN_IOUColection> iocollection = new List<POPM_TRN_IOUColection>();
POPM_TRN_IOUColection item1 = new POPM_TRN_IOUColection { date = "3/5/68", docno = "doc1" };
POPM_TRN_IOUColection item2 = new POPM_TRN_IOUColection { date = "3/5/69", docno = "doc2" };
iocollection.Add(item1);
iocollection.Add(item2);
return Json(iocollection, JsonRequestBehavior.AllowGet);
}
public ActionResult Index127()
{
List<RangeDataView> dv = new List<RangeDataView>();
RangeDataView item1 = new RangeDataView { IO_ID = "1", PO_IO_DOC_NO = "DOC1", PO_IO_TOPIC = "TOPIC1", PO_IOU_Client = "CLIENT1" };
RangeDataView item2 = new RangeDataView { IO_ID = "2", PO_IO_DOC_NO = "DOC2", PO_IO_TOPIC = "TOPIC2", PO_IOU_Client = "CLIENT2" };
RangeDataView item3 = new RangeDataView { IO_ID = "3", PO_IO_DOC_NO = "DOC3", PO_IO_TOPIC = "TOPIC3", PO_IOU_Client = "CLIENT3" };
RangeDataView item4 = new RangeDataView { IO_ID = "4", PO_IO_DOC_NO = "DOC4", PO_IO_TOPIC = "TOPIC4", PO_IOU_Client = "CLIENT4" };
dv.Add(item1);
dv.Add(item2);
dv.Add(item3);
dv.Add(item4);
return View(dv);
}