在'點擊'不發射/尋找數據子行打開

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

有一件事我注意到的是，有時，但並不總是它顯示「選擇td.details控制已經被先前指定」。但是，當我尋找任何早期的定義，包括全局搜索或註釋代碼 - 錯誤仍然出現。 IDK，如果這是一個紅色的鯡魚，但它不會以某種方式獲得子行。

這就是我想實現https://datatables.net/examples/api/row_details.html

Answer 1

我看到以下可能的錯誤：

1. 使用Ajax更新 - 你TBODY將重新建立，因此您的活動將無法正常工作（嘗試使用$('#fixtures').on('click', 'tbody td.details-control', ...

2. var row = table.row(tr); - 應該是var row = fixtureTable.row(tr);