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中的工作示例。

悬停下拉列表不适用于多列

1 个答案: