哈弗的下拉列表中不工作的多個列

Question

我一直在試圖讓一些div徘徊低於我的頭有複選框，在我有這個工作： Jsfiddle

initComplete: function(settings, json) { 
    let api = new $.fn.dataTable.Api(settings); 
    let header = api.column(0).header(); 
    let originalText = $(header).text(); 
    let newText = originalText + `<div class="filterOptions" id="FilterStatus"> 
      <input type="checkbox" id="Status1" data-status="1"> 
      <label for="Status1">1</label> 
      <input type="checkbox" id="Status2" data-status="2"> 
      <label for="Status2">2</label> 
      <input type="checkbox" id="Status3" data-status="3"> 
      <label for="Status3">3</label> 
      <input type="checkbox" id="Status4" data-status="4"> 
      <label for="Status4">4</label> 
     </div>`; 
    $(header).html(newText).attr("id", "hover") 
} 

然而，當我嘗試採用同樣的到第二個標題，只有最後一個標題似乎應用了下拉列表： Jsfiddle

Answer 1

這是因爲您正試圖添加具有相同名稱的多個屬性initComplete。在結果中，你覆蓋它，只有最後一個被處理。你應該把所有的邏輯放到一個initComplete屬性：

initComplete: function(settings, json) { 
    let api = new $.fn.dataTable.Api(settings); 
    let header = api.column(0).header(); 
    let originalText = $(header).text(); 
    let newText = originalText + `<div class="filterOptions" id="FilterStatus1"> 
      <input type="checkbox" id="Status1" data-status="1"> 
      <label for="Status1">1</label> 
      <input type="checkbox" id="Status2" data-status="2"> 
      <label for="Status2">2</label> 
      <input type="checkbox" id="Status3" data-status="3"> 
      <label for="Status3">3</label> 
      <input type="checkbox" id="Status4" data-status="4"> 
      <label for="Status4">4</label> 
     </div>`; 
    $(header).html(newText).attr("id", "hover1"); 

    let header2 = api.column(2).header(); 
    let originalText2 = $(header2).text(); 
    let newText2 = originalText2 + `<div class="filterOptions" id="FilterStatus2"> 
      <input type="checkbox" id="Status1" data-status="1"> 
      <label for="Status1">1</label> 
      <input type="checkbox" id="Status2" data-status="2"> 
      <label for="Status2">2</label> 
      <input type="checkbox" id="Status3" data-status="3"> 
      <label for="Status3">3</label> 
      <input type="checkbox" id="Status4" data-status="4"> 
      <label for="Status4">4</label> 
     </div>`; 
    $(header2).html(newText2).attr("id", "hover2") 
} 

工作在jsFiddle例子。