【发布时间】：2016-09-11 12:42:26
【问题描述】：
我正在尝试让两个单独工作的功能一起工作。
数字 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;
}
);
只有在选中复选框时才能使这项工作。并在取消选择时释放。
更新：
这种工作但不是应该的（一旦检查尝试与下拉过滤器交互）你会看到它工作，但当它未选中时它不会变回，它也不会过滤可见数据检查时意味着我必须与下拉菜单交互才能看到结果。我该如何解决这个问题？
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;
}
);
}
});
【问题讨论】：
标签： javascript jquery html checkbox datatables