Question

这是所有代码。

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

我注意到的一件事是，有时但并非总是显示＆＃34;选择器td.details-control已经在之前指定过＆＃34;。但是，当我寻找任何早期的定义，包括全局搜索或注释掉代码时 - 错误仍然出现。 IDK，如果这是一个红鲱鱼，但是，它不会以某种方式得到孩子的行。

这就是我想要实现的目标https://datatables.net/examples/api/row_details.html

Answer 1

我发现以下可能是错误：

使用ajax更新 - 您将重新创建，因此您的活动将无效（尝试使用$('#fixtures').on('click', 'tbody td.details-control', ...
var row = table.row(tr); - 应为var row = fixtureTable.row(tr);

点击＆＃39;点击＆＃39;没有触发/查找Datatable子行打开

1 个答案: