user6063812 user6063812 - 2 months ago 12
jQuery Question

On 'click' not firing/finding Datatable child row to open up

Here's all the code.

@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>
}




One thing I have noticed is that sometimes but not always it is showing "selector td.details-control is already specified earlier". But when I look for any earlier definitions including global searching or commenting out code - the error still appears.
enter image description here
IDK, if this is a red herring, but, it's not getting the child row somehow.

This is what I am trying to achieve https://datatables.net/examples/api/row_details.html

kva kva
Answer

I see that following could be mistakes:

  1. with ajax update - you tbody will be recreated, so your event will not work (try to use $('#fixtures').on('click', 'tbody td.details-control', ...

  2. var row = table.row(tr); - should be var row = fixtureTable.row(tr);