すべてのコードは次のとおりです。私が気づいた「クリックして」発砲していない/見つけていないデータ可能な子の行が開く
@model IEnumerable<Arb.Models.Fixture>
@{
ViewBag.Title = "Fixtures";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<table id="fixtures" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Fixture</th>
<th>Date/Time</th>
<th>Market</th>
<th>Selection</th>
<th>Bookie</th>
<th>Coupon</th>
<th>Back</th>
<th>Lay</th>
<th>Size</th>
<th>Percent</th>
</tr>
</thead>
<tbody></tbody>
</table>
@section scripts
{
<style type="text/css" class="init">
td.details-control {
background: url('http://next.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('http://next.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
</style>
<script>
/* Formatting function for row details - modify as you need */
function format(d) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Full name:</td>' +
'<td>' + d.name + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extension number:</td>' +
'<td>' + d.extn + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extra info:</td>' +
'<td>And any further details here (images etc)...</td>' +
'</tr>' +
'</table>';
}
$(document).ready(function() {
var fixtureTable = $('#fixtures').DataTable({
ajax: {
url: "/api/fixtures",
dataSrc: ""
},
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{
data: "eventName",
render: function (data, type, fixture) {
return "<a href='/fixtures/edit/" + fixture.id + "'>" + fixture.eventName + "</a>";
}
},
{
data: 'eventDateTime',
render: function (data, type, row) {
var d = new Date(data);
return d.getDate() + '-' + ('0' + d.getMonth()).slice(-2) + ' ' + ('0' + d.getHours()).slice(-2) + ':' + ('0' + d.getMinutes()).slice(-2);
}
},
{ data: 'marketName' },
{ data: 'selectionName' },
{ data: 'bookmakerName' },
{ data: 'couponName' },
{
data: 'backOdds',
render: $.fn.dataTable.render.number(',', '.', 2)
},
{
data: 'exchangeType.layOdds',
render: $.fn.dataTable.render.number(',', '.', 2)
},
{
data: 'exchangeType.size',
render: $.fn.dataTable.render.number('', '.', 0, '£')
},
{
data: null,
render: function (data, type, row) {
return Math.round((row.backOdds/row.exchangeType.layOdds) * 100 - 100) + '%';
}
}
],
"order": [[1, 'asc']]
});
setInterval(function() {
fixtureTable.ajax.reload(null, false); // user paging is not reset on reload
var currentTime = new Date().toLocaleTimeString('en-GB', {
hour: "numeric",
minute: "numeric",
second: "numeric"
});
var currentDate = new Date();
var datetime = "Last Updated: " + currentDate.getDate() + "/" + (currentDate.getMonth() + 1)
+ "/" + currentDate.getFullYear() + " " + currentTime;
$("#UpdateTime").text(datetime);
}, 10000);
// Add event listener for opening and closing details
$('#fixtures 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>
}
ことの一つは、時々、いつもではないが、それが表示されている「セレクタtd.details制御がすでに先に指定されている」ということです。しかし、グローバル検索やコードのコメントアウトなどの以前の定義を見ると、エラーが表示されます。 IDK、これは赤いニシンですが、何らかの理由で子の行が表示されません。
これは私がhttps://datatables.net/examples/api/row_details.html
あなたのコードにフィドルを作成できますか? –