我一直在尝试让一些 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")
}
但是,当我尝试将相同的内容应用于第二个 header 时,只有最后一个 header 似乎应用了下拉列表: Jsfiddle
最佳答案
这是因为您尝试添加多个具有相同名称 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 中的工作示例.
关于javascript - 悬停下拉菜单不适用于多列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42163081/