DataTables merge jQuery/Javascript functions from two seperate tables

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://ift.tt/1V4jYYb

$(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.

http://ift.tt/1OuBhuE

$(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://ift.tt/1V4jYYb.

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.

$(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 = columns[1]; // use data for the age column
        if (target === position){
            return true;
        }
                return false;
    }
);

How can I make this work only when the checkbox is selected.