我有一个使用MVC制作的网站。它有一个使用DataTables构建的表。然而，有太多的列，它看起来非常混乱和挤压在一起。所以我决定使用DataTables Child rows (show extra/detailed information) feature来减少列数。
这是我的代码现在的样子：
@using MyWebSite
@model IEnumerable<TableModel>
<!--DATATABLE-->
@section scripts{
<script type="text/javascript">
$(document).ready(function () {
//create table
var table = $('#example').DataTable({
//child row code -- show and hide extra row details
//this is the default code from the data tables site. need to change. I'm not using ajax -- objects.txt -- i'm using a model
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']],
dom: 'Bfrtip',
select: true,
//Get Site Selected Data button
buttons: [
{
text: 'Get selected site info',
action: function (e) {
e.preventDefault();
var data1 = $.map(table.rows(['.selected']).data(), function (item) {
return item[1]
});
var postData = { hosts: data1 }
// Submit form data via Ajax
$.ajax({
type: "POST",
url: '/Site/PrepWebsiteSelections',
data: postData,
dataType: "text",
success: function (response) {
alert(response);
},
error: function (xhr) {
alert("Error " + xhr);
}
});
}
}]
});
// Add event listener for opening and closing details
$('#example tbody').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 {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
});
});
</script>
<script type="text/javascript">
$(function () {
var status = $.connection.webSiteHub;
status.client.updateSiteStatus = function (site, message) {
var table = $('#example').DataTable();
var indexes = table.rows().eq(0).filter(function (rowIdx) {
return table.cell(rowIdx, 1).data() === host ? true : false;
});
table.rows(indexes).every(function (rowIdx, tableLoop, rowLoop) {
var d = this.data();
d[8] = message;
//table.fnUpdate(message, this, undefined, false);
$('#example').dataTable().fnUpdate(d,table.row(this).index(),undefined,false);
});
};
$.connection.hub.start()
});
</script>
<form name="frm-example" id="frm-example">
<table class="display" id="example">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Apple)
</th>
<th>
@Html.DisplayNameFor(model => model.Orange)
</th>
<th>
@Html.DisplayNameFor(model => model.Banana)
</th>
<th>
@Html.DisplayNameFor(model => model.Avocado)
</th>
<th>
@Html.DisplayNameFor(model => model.Peach)
</th>
<th>
@Html.DisplayNameFor(model => model.Strawberry)
</th>
<th>
@Html.DisplayNameFor(model => model.Plum)
</th>
<th>
@Html.DisplayNameFor(model => model.Grape)
</th>
<th>
@Html.DisplayNameFor(model => model.Tomato)
</th>
</tr>
</thead>
<tbody>
@{
var models = Model.ToList();
for (var i = 0; i < models.Count; i++)
{
<tr>
<td>
@Html.CheckBoxFor(modelItem => models[i].Apple)
</td>
<td>
@Html.DisplayFor(modelItem => models[i].Orange)
</td>
<td>
@Html.DisplayFor(modelItem => models[i].Banana)
</td>
<td>
@Html.DisplayFor(modelItem => models[i].Avocado)
</td>
<td>
@Html.DisplayFor(modelItem => models[i].Peach)
</td>
<td>
@Html.DisplayFor(modelItem => models[i].Strawberry)
</td>
<td>
@Html.DisplayFor(modelItem => models[i].Plum)
</td>
<td>
@Html.DisplayFor(modelItem => models[i].Grape)
</td>
<td>
@Html.DisplayFor(modelItem => models[i].Tomato)
</td>
</tr>
}
}
</tbody>
</table>
</form>
正如您所看到的，我已经复制并粘贴了jquery code from the DataTables site而没有真正改变任何内容。我碰到了墙，因为我不确定如何使用Razor代码获取当前表并更改它以容纳隐藏的子行。我想保持我的设置。主要是为了避免使用大量不同的编码风格和语言混乱。
这是我第一次使用MVC的项目，所以如果这个问题看起来有点微不足道，我很抱歉。
答案 0 :(得分：0)
实际上这很简单，你只需要构建一个简单的表，我所做的就是使用responsive扩展，基本上做Child行（显示额外/详细信息），但少用代码：
@model IEnumerable<TableModel> <!--Our model-->
<!--We build our table-->
<table class="table table-condensed table-hover table-striped dt-responsive table-bordered">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Field1)
</th>
<th>
@Html.DisplayNameFor(model => model.Field2)
</th>
<th>
@Html.DisplayNameFor(model => model.Field3)
</th>
<th>
@Html.DisplayNameFor(model => model.Field4)
</th>
<th>
@Html.DisplayNameFor(model => model.Field5)
</th>
<th>
@Html.DisplayNameFor(model => model.Field6)
</th>
<th>
@Html.DisplayNameFor(model => model.Field7)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(model => item.Field1)
</td>
<td>
@Html.DisplayFor(model => item.Field2)
</td>
<td>
@Html.DisplayFor(model => item.Field3)
</td>
<td>
@Html.DisplayFor(model => item.Field4)
</td>
<td>
@Html.DisplayFor(model => item.Field5)
</td>
<td>
@Html.DisplayFor(model => item.Field6)
</td>
<td>
@Html.DisplayFor(model => item.Field7)
</td>
</tr>
}
</tbody>
@section Scripts {
//Of course you will need to include your scripts of datatable and the styles
<script>
$('.table').DataTable({ responsive: true });
</script>
}