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