table header 上的切换按钮仅在 2 次切换后有效

Question

我有一个具有搜索功能的 table，当单击切换按钮时，搜索输入会在 table 列 headers 中打开。再次单击该按钮时，它会恢复为列名。但是，此功能只有在单击两次后才能使用，然后会引入一些奇怪的样式，我不知道它是从哪里来的。

这里是 javascript:

$('#action_btn').on('click', function (event) {

if (document.getElementById("toggle_id").value == "OFF") {

    // Setup - add a text input to each footer cell
    $('#example thead th').each(function () {
        var title = $('#example tfoot th').eq($(this).index()).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        document.getElementById("toggle_id").value = "ON";
    });

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().eq(0).each(function (colIdx) {
        $('input', table.column(colIdx).header()).on('keyup change', function () {
            table.column(colIdx)
                .search(this.value)
                .draw();
        });
    });

} else {
    // Remove a text input to each footer cell
    $('#example thead th').each(function () {
        var title = $('#example tfoot th').eq($(this).index()).text();
        $(this).html('<th>'+title+'</th>');
        document.getElementById("toggle_id").value = "OFF";
    });
}
});

我有一个 fiddle 可以更方便地查看我的代码：http://jsfiddle.net/flldom001/vmxgz0s5/

如何确保按钮按以下方式切换搜索？：默认值：关闭切换：on/off

Answer 1

不要在 div 标签上使用 value 属性，而是使用 class 属性。根据需要切换此属性。

由于 value 不是 div 的有效属性，DOM 未选择它。将属性值显式设置为 'ON' 或 'OFF' 后。它捡起来了。

这是更新后的 fiddle

toggle_id 元素

<div id="toggle_id" class="OFF">

Jquery 检查 on/off 状态

if ($("#toggle_id.OFF").length > 0) {

Answer 2

我对你的Fiddle

做了一些修改

我把table外面的#toggle_iddiv去掉了，给了一个data-value属性。

勾选这个DEMO

$(document).on('click', '#action_btn', function (event) {

    if ($("#toggle_id").attr("data-value") == "OFF") {
        console.log($("#toggle_id").data("value"));
        // Setup - add a text input to each footer cell
        $('#example thead th').each(function () {
            var title = $(this).text().replace('Search ', '');
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            $("#toggle_id").attr("data-value", "ON");
        });

        // DataTable
        var table = $('#example').DataTable();

        // Apply the search
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).header()).on('keyup change', function () {
                table.column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });

    } else {
        // Setup - remove a text input to each footer cell
        $('#example thead th').each(function () {
            var title = $(this).find('input').attr('placeholder');             
            $(this).removeAttr('class tabindex aria-controls rowspan colspan aria-sort aria-label style').html(title);
            $("#toggle_id").attr("data-value", "OFF");
        });
    }
});

table header 上的切换按钮仅在 2 次切换后有效

Toggle button on table header works only after 2 toggles

javascript

jquery

css

jquery-datatables