Hover выпадающие не работает на нескольких столбцах

Question

Я пытался получить некоторые дивы парить ниже мои заголовки, которые флажки в Я имел эту работу:. 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.