Individual Column Search In DataTables Not Working

Question

I have a table that I'm trying to implement individual column search on using jQuery DataTables. The API that describes how to do this is here: https://datatables.net/examples/api/multi_filter.html which is what I used when attempting to implement this. I'm also using a global search function, which allows me to search across all tables. As far as I can see, the conflict comes in between using

            var table = $(".datatable").dataTable();

versus

            var table = $(".datatable").DataTable();

because they return two different things (this is described in the following answer given to a related question --> dataTable() vs. DataTable() - why is there a difference and how do I make them work together? after reading this, I tried using the solution like so:

table.api().columns().eq(0).each(function(colIdx) {

but sadly this didn't make the feature work. The table appears just fine along with the searchboxes at the bottom of each column, and the global search works perfectly. If you could spot something I might be doing wrong or give any advice it would be much appreciated. The complete script is as follows:

        script.
        $(document).ready(function() {
            $('.datatable').DataTable({

            });


            // THIS IS THE GLOBAL SEARCH CODE
            $.fn.dataTableExt.oApi.fnFilterAll=function(oSettings,sInput,iColumn,bRegex,bSmart){
                var settings = $.fn.dataTableSettings;
                for (var i = 0; i < settings.length; i++) {
                    settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
                }
            };

            var table = $(".datatable").dataTable();


            $("#Search_All").keyup(function () {
                // Filter on the column (the index) of this element
                table.fnFilterAll(this.value);
            });


            // THIS IS THE INDIVIDUAL COLUMN SEARCH
            $('.datatable tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            });


            table.api().columns().eq(0).each(function(colIdx) {
                var that = this;
                $('input', this.footer()).on('keyup change', function(){
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                })
            });
        });

Thanks for your time!