Merge functions from two seperate tables

code-connoisseur

I am trying to make two functions work together that both work on their own.

Number 1: Is my table with a dropdown filter inside a control panel which I am trying to add a secondary checkbox filter to, everything works fine here.

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

Number 2: Is an example I found online of filtering a DataTable with a button as you can see it works on its own but I am trying to change it slightly from a button to a checkbox so the filter can be released once it is unchecked.

You will have noticed the checkbox I made for this in Number 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;
    }
);

Now you can see the two functions I am trying to put all this together into one table (Number 1) at http://jsfiddle.net/btofjkus/12/.

What I want to do is create a checkbox filter for "Software Engineers" from the "Position" column in Number 1.

This looks complicated when I write it down with all these codeblocks but it's really just merging two functions together in the correct way.

I have tried tearing the code apart myself and gluing it together but everything I try seems to be wrong.

Example: (failure)

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

    });
});

As you can see above I tried mashing the code together with no luck, I have also tried some methods that seem to invoke the function but not when #checkbox-filter is checked.

The example below makes the dropdown filter only select "Software Engineers" from the "Position" column which is my criteria for this checkbox filter (but only when its checked).

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

How can I make this work only when the checkbox is selected. And release when it is deselected.

UPDATE:

This kind of works but not as it should (once checked try interacting with the dropdown filter) you will see it kind of works, but it doesn't change back when it is unchecked, it also does not filter the visible data when checked meaning I have to interact with the dropdown menu to see results. How can I fix this?

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

view on stackoverflow: https://stackoverflow.com/questions/37241831/datatables-merge-jquery-javascript-functions-from-two-seperate-tables

Edited by Allan - Syntax highlighting.

allan

Thanks for the links. The problem is that your change event handler for the checkbox is simply adding another filter to the table every time the table is drawn! It isn't actually drawing or filtering the table.

So what you want is to add the filter once and then call the draw() method on change, which will cause the custom filter to run again.

http://jsfiddle.net/btofjkus/14/

Allan