【发布时间】：2015-10-30 15:34:10
【问题描述】：
我有一个使用dataTables.net配置的单个DataTable，其中我正在使用Bootstrap选项卡在选择不同的选项卡时加载不同的数据集。
我通过参考以下两个示例对其进行了配置： http://live.datatables.net/sozobucu/41/edit 和 http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=create-dynamic-tabs-via-data-attribute。
当我运行应用程序时，我看到两个 Ajax 帖子同时提交，并且 MVC 控制器在我调试时在两个 ActionResults PopulateObjectATables 和 PopulateObjectBTables 之间来回切换。我还注意到，应用准备返回的 JSON 在方法返回时看起来是正确的。
问题在于 ObjectA 的选项卡正确加载并且 JSON 从服务器返回。但是，我收到一个指向我 http://datatables.net/tn/7 的 ObjectB 错误，并且在 firebug 中我看到返回的是 HTML 而不是 JSON，并且收到了 502.3 Bad Gateway 错误。
当我看到正在准备正确的 JSON 并且两个 MVC ActionResult 的编写方式相同时，我已经用完了我知道要寻找的东西。
脚本
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/respond/dest/respond.min.js"></script>
<script src="~/lib/datatables/media/js/jquery.dataTables.js"></script>
<script src="http://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
<link href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css" rel="stylesheet" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
@*<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"/>*@
<link rel="stylesheet" href="~/css/site.css"/>
@*<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>*@
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="~/lib/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
<script src="~/lib/angular/angular.js"></script>
<script src="~/lib/angular-datatables/dist/angular-datatables.js"></script>
查看
@model NewInventory.ViewModels.ExampleAllViewModel
<p>
@Html.ActionLink("Create New", "Create")
</p>
<div class="container">
<div class="row">
<div class="well well-lg">
<ul class="nav nav-tabs">
<li class="active objectA-tab"><a data-toggle="tab" role="tab" data-target="#ObjectAData">Object A</a></li>
<li class="objectB-tab"><a data-toggle="tab" role="tab" data-target="#ObjectBData">Object B</a></li>
</ul>
<div class="tab-content">
<div id="ObjectAData" class="tab-pane fade in active" role="tabpanel">
<table id="ObjectATable1" class="table dt-responsive" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
<th>Example5</th>
<th>Example6</th>
<th>Example7</th>
<th>Example8</th>
<th>Example9</th>
</tr>
</thead>
</table>
</div>
<div id="ObjectBData" class="tab-pane fade in" role="tabpanel">
<table id="ObjectBTable1" class="table dt-responsive" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
<th>Example5</th>
<th>Example6</th>
<th>Example7</th>
<th>Example12</th>
<th>Example13</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
});
</script>
<script>
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
</script>
<script>
$(document).ready(function () {
$("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) {
console.log('show tab');
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.responsive.recalc();
});
$("#ObjectATable1").dataTable({
"bServerSide": true,
"sAjaxSource": "PopulateObjectATables",
"bProcessing": true,
"ordering": false,
"paging": false,
"scrollY": "150px",
"searching": false,
"info": false,
"columns": [
{ "data": "Example1" },
{ "data": "Example2" },
{ "data": "Example3" },
{ "data": "Example4" },
{ "data": "Example5" },
{ "data": "Example6" },
{ "data": "Example7" },
{ "data": "Example8" },
{ "data": "Example9" }]
//"deferRender": true,
});
$("#ObjectBTable1").dataTable({
"bServerSide": true,
"sAjaxSource": "PopulateObjectBTables",
"bProcessing": true,
"ordering": false,
"paging": false,
"scrollY": "150px",
"searching": false,
"info": false,
//"deferRender": true,
"columns": [
{ "data": "Example1" },
{ "data": "Example2" },
{ "data": "Example3" },
{ "data": "Example4" },
{ "data": "Example5" },
{ "data": "Example6" },
{ "data": "Example7" },
{ "data": "Example12" },
{ "data": "Example13" }
]
});
});
</script>
MVC 控制器动作结果
public ActionResult PopulateObjectATables(jQueryDataTableParamModel param)
{
ExampleAllViewModel myVM = new ExampleAllViewModel();
List<ObjectA> ObjectAList = new List<ObjectA>(_repository.GetAllObjectA().ToList());
myVM.ListObjectA = ObjectAList;
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = myVM.ListObjectA.Count(),
iTotalDisplayRecords = myVM.ListObjectA.Count(),
aaData = myVM.ListObjectA
});
}
public ActionResult PopulateObjectBTables(jQueryDataTableParamModel param)
{
ExampleAllViewModel myVM = new ExampleAllViewModel();
List<ObjectB> ObjectBList = new List<ObjectB>(_repository.GetAllObjectB().ToList());
myVM.ListObjectB = ObjectBList;
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = myVM.ListObjectB.Count(),
iTotalDisplayRecords = myVM.ListObjectB.Count(),
aaData = myVM.ListObjectB
});
}
【问题讨论】：
标签： asp.net ajax datatables