Question

我正在努力让两个功能一起工作，这两个功能都可以自己工作。

数字1：我的桌子是否在控制面板中有一个下拉过滤器，我正在尝试添加辅助复选框过滤器，这里的一切正常。

$(document).ready(function () {
      $('#example').DataTable({
        ordering: false,
      bLengthChange: false,

       initComplete: function () {
            this.api().columns(2).every(function () {
                var column = this;
                var select = $('<select><option value="">Show all</option></select>')
                    .appendTo($("#control-panel").find("div").eq(1))
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());                                     

                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

                console.log(select);

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }        
    });
    console.log()
});

数字2：我在网上找到了一个使用按钮过滤DataTable的示例，因为您可以看到它可以自行运行，但我正尝试将其从按钮略微更改为复选框过滤器可以在取消选中后释放。

您会注意到我在数字1中为此做的复选框。#checkbox-filter。

https://jsfiddle.net/annoyingmouse/ay16vnp1/

$(function () {
    var dataTable = $('#example').DataTable({
        searching: true,
        info: false,
        lengthChange: false
    });
    $('#filterButton').on('click', function () {
        dataTable.draw();
    });
});
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var target = 'Software Engineer';
        var position = data[1]; // use data for the age column
        if (target === position){
            return true;
        }
        return false;
    }
);

现在你可以看到我试图将所有这两个函数放在http://jsfiddle.net/btofjkus/12/的一个表（第1号）中。

我想要做的是从数字1的“位置”列创建“软件工程师”的复选框过滤器。

当我用所有这些代码块写下来时，这看起来很复杂，但它实际上只是以正确的方式将两个函数合并在一起。

我曾尝试将代码分开并将其粘合在一起，但我尝试的所有内容似乎都是错误的。

示例：（失败）

$(document).ready(function () {
      $('#example').DataTable({
        ordering: false,
      bLengthChange: false,

       initComplete: function () {
            this.api().columns(2).every(function () {
                var column = this;
                var select = $('<select><option value="">Show all</option></select>')
                    .appendTo($("#control-panel").find("div").eq(1))
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());                                     

                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

                console.log(select);

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }        
    });

    console.log()
});

$(document).ready(function() {

if $('#checkbox-filter').is(':checked' function() {
        $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var target = 'Software Engineer';
        var position = data[1]; // use data for the age column
        if (target === position){
            return true;
        }
                return false;
    }
);

    });
});

正如您在上面所看到的，我尝试将代码混合在一起而没有运气，我也尝试了一些似乎调用函数的方法，但是在检查#checkbox-filter时却没有。

以下示例使下拉过滤器仅从“位置”列中选择“软件工程师”，这是此复选框过滤器的条件（但仅在选中时）。

$(document).ready(function () {
      $('#example').DataTable({
        ordering: false,
      bLengthChange: false,

       initComplete: function () {
            this.api().columns(2).every(function () {
                var column = this;
                var select = $('<select><option value="">Show all</option></select>')
                    .appendTo($("#control-panel").find("div").eq(1))
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());                                     

                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

                console.log(select);

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }        
    });

    console.log()
});


$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var target = 'Software Engineer';
        var position = data[1]; // use data for the position column
        if (target === position){
            return true;
        }
                return false;
    }
);

如果选中此复选框，我该如何才能使其工作。并在取消选择时释放。

更新

这种工作但不是应该的（一旦检查尝试与下拉过滤器交互）你会看到它有点工作，但它不会在未选中时改回，它也不会过滤可见数据检查时，我必须与下拉菜单进行交互以查看结果。我该如何解决这个问题？

http://jsfiddle.net/btofjkus/13/

$(document).ready(function () {
      $('#example').DataTable({
        ordering: false,
      bLengthChange: false,

       initComplete: function () {
            this.api().columns(2).every(function () {
                var column = this;
                var select = $('<select><option value="">Show all</option></select>')
                    .appendTo($("#control-panel").find("div").eq(1))
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());                                     

                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

                console.log(select);

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }        
    });
    console.log()
});

//changes below
$('#checkbox-filter').change(function() {
  if ($(this).is(':checked')) {
    $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var target = 'Software Engineer';
        var position = data[1]; // use data for the position column
        if (target === position){
            return true;
        }
                return false;
    }
);
}
});

Answer 1

以下是工作解决方案jsfiddle

$(document).ready(function () {
  var dataTable = $('#example').DataTable({
    ordering: false,
    bLengthChange: false,
    initComplete: function () {
        this.api().columns(2).every(function () {
            var column = this;
            var select = $('<select><option value="">Show all</option></select>')
                .appendTo($("#control-panel").find("div").eq(1))
                .on('change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                $(this).val());
                column.search(val ? '^' + val + '$' : '', true, false)
                    .draw();
            });
            column.data().unique().sort().each(function (d, j) {
                select.append('<option value="' + d + '">' + d + '</option>')
            });
        });
    }        
 });

 $('#checkbox-filter').on('change', function() {
    dataTable.draw();
 });

 $.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    var target = 'Software Engineer';
    var position = data[1]; // use data for the age column
    if($('#checkbox-filter').is(":checked")) {
       if (target === position) {
          return true;
       }
       return false;
    }
    return true;
  }
 );
});

DataTables从两个单独的表

1 个答案: