Jquery Datatable - 選擇器拋出表/行undefined

Question

我已經找到了一個解決方案，但我沒有清楚地理解它不工作的原因。你可以幫我嗎 ？

這是我的代碼，它拋出一個表未定義的錯誤，當我改變var data = window.table.row($(this)).data()，以var data = window.table.row($(this)).data()，誤差變化

0x800a138f - JavaScript runtime error: Unable to get property 'row' of undefined or null reference

<hr /> 
<div class="row"> 
    <div class="col-xs-12"> 
     <table class="table table-striped table-bordered nowrap" id="calculation-table"> 
      <thead> 
       <tr> 
        <td>Beneficial Owner</td> 
        <td>Account</td> 
        <td>Country</td> 
        <td>Currency</td> 
        <td>Year</td> 
        <td>Updater</td> 
        <td>Updated</td> 
        <td>Output</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <th>Beneficial Owner</th> 
        <th>Account</th> 
        <th>Country</th> 
        <th>Currency</th> 
        <th>Year</th> 
        <th>Updater</th> 
        <th>Updated</th> 
        <th>Output</th> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     //Calculation.init(); 
     $('#calculation-table').DataTable(
      { // set server side processing to true 
       bServerSide: true, 
       // set controller responsible for sorting and paging 
       sAjaxSource: "CalculationTest/AjaxHandler", 
       // show processing is happening while getting data 
       bProcessing: true, 
       sPaginationType: 'full_numbers', 
       iDisplayLength: 15, 
       lengthMenu: [[15, 25, 50, -1], [15, 25, 50, "All"]], 
       columns: [ 
        { data: "BeneficialOwner" }, 
        { data: "Account" }, 
        { data: "Country" }, 
        { data: "Currency" }, 
        { data: "Year" }, 
        { data: "Updater" }, 
        { data: "Updated".toString() }, 
        { 
         "targets": -1, 
         "data": null, 
         "defaultContent": "<button class='btn btn-primary'>Download File</button>" 
        } 
       ], 
       "language": { 
        "search": "", 
        "searchPlaceholder": "Search..." 
       } 
      }); 

     $('#calculation-table > tbody').on('click', 'button', function() { 
      var data = table.row($(this)).data(); 
      var url = '/Calculation/DownloadCalculation'; 
      $.ajax({ 
       type: "GET", 
       url: url, 
       data: { id: data[5] }, 
       dataType: "html", 
       success: function (data) { 
        //put your code here 
       } 
      }); 
     }); 

    }); 
</script> 

Answer 1

<td> is for <tbody> 
<th> is for <thead> 

你已經在你的HTML

交換