DataTables从两个独立的表中合并jQuery/Javascript函数

我正试图让两个功能一起工作，它们各自独立工作

第1条：是我的表格，在控制面板中有一个下拉过滤器，我正在尝试添加一个辅助复选框过滤器，这里一切正常

现在您可以看到我试图将这两个函数放在一个表中（1号）

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

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

---

我试着自己把代码拆开并粘在一起，但我尝试的一切似乎都是错误的

示例：（失败）

仅当选中复选框时，我如何使其工作。并在取消选择时释放

---

更新：

这类功能正常，但不是它应该的功能（一旦选中，请尝试与下拉式过滤器交互），您将看到它正常工作，但在未选中时不会更改，选中时也不会过滤可见数据，这意味着我必须与下拉式菜单交互以查看结果。我怎样才能解决这个问题

$（文档）.ready（函数（）{
$（'#示例'）。数据表({
订购：错，
bLengthChange:false，
initComplete:函数（）{
this.api（）.columns（2）.every（函数）（）{
var列=此；
var select=$（“全部显示”）
.appendTo（$（“#控制面板”）.find（“div”）.eq（1））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（））；
column.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
});
console.log（选择）；
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
});
});
}        
});
console.log（）
});
//下面的更改
$（'#复选框过滤器'）。更改（函数（）{
如果（$（this）.is（':checked'））{
$.fn.dataTable.ext.search.push(
功能（设置、数据、数据索引）{
var目标=‘软件工程师’；
var position=data[1]；//将数据用于position列
如果（目标===位置）{
返回true；
}
返回false；
}
);
}
});

这是有效的解决方案

$（文档）.ready（函数（）{
var dataTable=$（“#示例”）.dataTable({
订购：错，
bLengthChange:false，
initComplete:函数（）{
this.api（）.columns（2）.every（函数）（）{
var列=此；
var select=$（“全部显示”）
.appendTo（$（“#控制面板”）.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（函数（d，j）{
选择。追加（“”+d+“”）
});
});
}        
});
$（“#复选框过滤器”）。在（'change'，function（）上{
dataTable.draw（）；
});
$.fn.dataTable.ext.search.push(
功能（设置、数据、数据索引）{
var目标=‘软件工程师’；
var position=data[1]；//将数据用于年龄列
如果（$（'#复选框过滤器'）。为（“：选中”））{
如果（目标===位置）{
返回true；
}
返回false；
}
返回true；
}
);
});

这是有效的解决方案

$（文档）.ready（函数（）{
var dataTable=$（“#示例”）.dataTable({
订购：错，
bLengthChange:false，
initComplete:函数（）{
this.api（）.columns（2）.every（函数）（）{
var列=此；
var select=$（“全部显示”）
.appendTo（$（“#控制面板”）.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（函数（d，j）{
选择。追加（“”+d+“”）
});
});
}        
});
$（“#复选框过滤器”）。在（'change'，function（）上{
dataTable.draw（）；
});
$.fn.dataTable.ext.search.push(
功能（设置、数据、数据索引）{
var目标=‘软件工程师’；
var position=data[1]；//将数据用于年龄列
如果（$（'#复选框过滤器'）。为（“：选中”））{
如果（目标===位置）{
返回true；
}
返回false；
}
返回true；
}
);
});

非常感谢您抽出时间帮助我：）非常感谢您抽出时间帮助我：）

$(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()
});

$(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;
    }
);

$(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;
    }
);

    });
});

$(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;
    }
);

$(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;
    }
);
}
});

$(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;
  }
 );
});