列跨度4的表給這個錯誤遺漏的類型錯誤：未定義

Question

無法設置屬性「_DT_CellIndex」我有一個表，其中colspan導致上述error

我table是dynamic它可能會增長基礎上data

我使用下面的CDN爲datatable

//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js

這裏是演示：https://jsfiddle.net/3mazrcvL/10/

這裏是我的表

<table class="table table-boardered" id="examples"> 
     <thead> 
      <tr> 
       <th>Customer Id</th> 
       <th>project_name</th> 
       <th>product_name</th> 
       <th>quantity</th> 
       <th>price</th> 
      </tr> 
     </thead> 
<tbody> 



    <tr class="sum"> 
     <td>9</td> 
     <td></td> 
     <td>first</td> 
     <td>1</td> 
     <td>90</td> 
    </tr> 


    <tr class="sum"> 
     <td>9</td> 
     <td></td> 
     <td>first</td> 
     <td>1</td> 
     <td>90</td> 
    </tr> 


    <tr class="sum"> 
     <td>9</td> 
     <td></td> 
     <td>second</td> 
     <td>7</td> 
     <td>3000</td> 
    </tr> 


    <tr class="sum"> 
     <td>9</td> 
     <td></td> 
     <td>second</td> 
     <td>7</td> 
     <td>3000</td> 
    </tr> 


    <tr class="sum"> 
     <td>11</td> 
     <td></td> 
     <td>pen</td> 
     <td>2</td> 
     <td>90</td> 
    </tr> 


    <tr class="sum"> 
     <td>11</td> 
     <td></td> 
     <td>pencil</td> 
     <td>2</td> 
     <td>90</td> 
    </tr> 

    <tr> 
<td colspan="4">Total</td> 
<td id="total">42540</td> 
</tr> 
</tbody> 
</table> 

js代碼

$(document).ready(function() { 
     var table = $('#examples').DataTable(); 
     $('a.toggle-vis').on('click', function (e) { 
      e.preventDefault(); 

      var column = table.column($(this).attr('data-column')); 
      column.visible(!column.visible()); 
     }); 

     $('#examples tfoot th').each(function() { 
      var title = $('#examples thead th').eq($(this).index()).text(); 
      $(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>'); 
     }); 
     table.columns().eq(0).each(function (colIdx) { 
      $('input', table.column(colIdx).footer()).on('keyup change', function() { 
       table 
         .column(colIdx) 
         .search(this.value) 
         .draw(); 
      }); 
     }); 

     $('#exportAttendance222').bind('click', function (e) { 

      $('#examples').tableExport({ type: 'excel', escape: 'false', bootstrap: true}); 
     }); 
    }); 

請幫我在此先感謝！

Answer 1

方法1

當使用的數據表，使用列跨度= 4後，得到3- TD爲顯示無

<tr> 
    <td colspan="4">Total</td> 
    <td style='display:none'></td> 
    <td style='display:none'></td> 
    <td style='display:none'></td> 
    <td id="total">42540</td> 
</tr> 

實施例：https://jsfiddle.net/3mazrcvL/18/

方法2

是通過使用TFOOT

<tfoot> 
    <tr> 
     <td colspan="4">Total</td> 
     <td id="total">42540</td> 
    </tr> 
</tfoot> 

實施例：https://jsfiddle.net/3mazrcvL/17/

方法3

創建空白TFOOT和渲染TFOOT使用的數據表

HTML

<tfoot> 
    <tr> 
     <td colspan="4">Total</td> 
     <td id="total">0.00</td> 
    </tr> 
</tfoot> 

SCRIPT

var table = $('#examples').DataTable({ 
       "footerCallback": function (row, data, start, end, display) { 
        var api = this.api(), data; 
        // Remove the formatting to get integer data for summation 
        var intVal = function (i) { 
         return typeof i === 'string' ? 
           i.replace(/[$,]/g, '') * 1 : 
           typeof i === 'number' ? 
           i : 0; 
        }; 
        total = api.column(4).data().reduce(function (a, b) { 
          return intVal(a) + intVal(b); 
        }, 0); 
        $(api.column(4).footer()).html(total); 
       }, 
    }); 

實施例：https://jsfiddle.net/3mazrcvL/19/