0
我想让两个函数一起工作，两者都可以自己工作。DataTables从两个独立的表中合并jQuery/Javascript函数
数1：是我的表，我正在尝试二次复选框过滤器添加到控制面板中下拉过滤器，这里的一切工作正常。
http://jsfiddle.net/btofjkus/12/
$(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;
}
);
只有当选中该复选框时，我该如何进行此项工作。当它被取消选择时释放。
UPDATE：
这类作品，但并不像它应该（检查一次尝试用下拉过滤器交互），你会看到它种工作，但它不会改变的时候回它没有被选中，它也没有过滤可见的数据时，意味着我必须与下拉菜单进行交互才能看到结果。我怎样才能解决这个问题？
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;
}
);
}
});
非常感谢您抽出宝贵时间来帮助我:) – Scott