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

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例子。