jquery datatables hack

hack.js

// You'll want to change any place with a query selector to match your document. Otherwise this should be work for drag and drop
// I also am working with a massive spaghetti code mess, hence the global window funciton and the timeouts
// window.makeManagerDashSearch() should be called any time after the table is loaded (or even initiated as it refreshes itself
// also the final timeout with hiding the original search could probably be better accomplished with css

    function debounce(func, wait, immediate) {
        var timeout, wait = wait || 1000;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
            return true;
        };
    }
    window.makeManagerDashSearch = function makeSearch() {
        var parent = document.querySelector("md-dialog-content .custom-filters");
        if (!parent) { setTimeout(makeManagerDashSearch,1000); return }
        var source_label = document.createElement("label");
        source_label.innerText = "Search:\n";
        var source = document.createElement("input");
        source_label.appendChild(source);
        var old_value;
        source.addEventListener("keyup",debounce(function() {
            var target = document.querySelector("md-dialog-content [type=search]");
            if (old_value == target.value) { return }
            target.value = source.value;
            target.dispatchEvent(new Event("keyup"));
        }));
        setTimeout(function() {
            $("[type=search]").closest(".dataTables_filter").hide();
        },1000);
        parent.appendChild(source_label);
    }