如何將JavaScript數組傳遞給DataTable中的函數（）

Question

我想要replicate the following code in DataTables example。 它所做的只是顯示每列的下拉列表。 這些下拉列表可以在表格底部看到。

但對於我的情況，而不是使用HTML表格，我想通過JS數組。 下面是代碼

var dataSet = [ 
 
    ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"], 
 
    ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"], 
 
    ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"], 
 
    ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"], 
 
    ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"], 
 
    ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"], 
 
    ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"], 
 
    ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"], 
 
    ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"] 
 
]; 
 

 

 
$(document).ready(function() { 
 
    $('#example').DataTable({ 
 
     data: dataSet, 
 
     columns: [{title: "Name"}, 
 
        {title: "Position"}, 
 
        {title: "Office"}, 
 
        {title: "Extn."}, 
 
        {title: "Start date"}, 
 
        {title: "Salary"}], 
 
     
 
     // This function doesn't work as expected. 
 
     // It should create the drop down list for every column 
 
     // see DT link given earlier. 
 
     initComplete: function (setting, json) { 
 
      this.api().columns().every(function() { 
 
       var column = this; 
 
       var select = $('<select><option value=""></option></select>') 
 
        .appendTo($(column.footer()).empty()) 
 
        .on('change', function() { 
 
         var val = $.fn.dataTable.util.escapeRegex(
 
          $(this).val() 
 
         ); 
 
    
 
         column 
 
          .search(val ? '^'+val+'$' : '', true, false) 
 
          .draw(); 
 
        }); 
 
    
 
       column.data().unique().sort().each(function (d, j) { 
 
        select.append('<option value="'+d+'">'+d+'</option>') 
 
       }); 
 
      }); 
 
     } 
 
     
 
    }); 
 
});

<link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script> 
 

 
<table id="example" class="display" width="100%">

注意，當您運行的代碼片段，initComplete下的功能不工作。最後的結果我希望它顯示一個下拉列表如下：

什麼去它的方式嗎？

Answer 1

如果你想將數據添加到頁腳，你至少需要一個頁腳

在你的代碼$(column.footer())任何回報，從而創建了select但從未添加到DOM

<table id="example" class="display" width="100%"> 
    <tfoot> 
     <tr> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
    </tfoot> 
</table> 

如果您不想手動添加頁腳結構，可以使用下面的JS代碼的第一部分創建此頁腳

$(document).ready(function() { 
 

 
    var columns = [ 
 
     {title: "Name"}, 
 
     {title: "Position"}, 
 
     {title: "Office"}, 
 
     {title: "Extn."}, 
 
     {title: "Start date"}, 
 
     {title: "Salary"} 
 
    ]; 
 

 
    // Footer construction 
 
    var $tfoot = $("#example tfoot tr"); 
 
    for (var i = 0, len = columns.length; i < len ; i++){ 
 
     $tfoot.append("<th>"); 
 
    } 
 
    
 
    $('#example').DataTable({ 
 
     data: dataSet, 
 
     columns: columns, 
 
     initComplete: function (setting, json) { 
 
      this.api().columns().every(function() { 
 
       var column = this; 
 
       var select = $('<select><option value=""></option></select>') 
 
        .appendTo($(column.footer()).empty()) 
 
        .on('change', function() { 
 
         var val = $.fn.dataTable.util.escapeRegex(
 
          $(this).val() 
 
         ); 
 
    
 
         column 
 
          .search(val ? '^'+val+'$' : '', true, false) 
 
          .draw(); 
 
        }); 
 
    
 
       column.data().unique().sort().each(function (d, j) { 
 
        select.append('<option value="'+d+'">'+d+'</option>') 
 
       }); 
 
      }); 
 
     } 
 
     
 
    }); 
 
}); 
 

 
var dataSet = [ 
 
    ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"], 
 
    ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"], 
 
    ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"], 
 
    ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"], 
 
    ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"], 
 
    ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"], 
 
    ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"], 
 
    ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"], 
 
    ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"] 
 
];

<link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script> 
 

 
<table id="example" class="display" width="100%"> 
 
    <tfoot><tr></tr></tfoot> 
 
</table>