Data Tables - Right Click Filter/Clear Filter Context Menu with Bootstrap

sm1l3y

Just thought I would share this with others as this community has been very helpful to me. Basically this is a way to filter distinctly on any column. You right click a cell and click filter, and it filters by the value. Of course you can also right click and clear the filter. You need JQUERY and Bootstrap...we are using JQUERY 2.2.4 and Bootstrap 3.3.7. This is based loosely on the version here which instead uses JQUERY UI http://live.datatables.net/caderego/100/embed

First you need to add this to your index page:

        <ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
            <li><a tabindex="-1" id="filter">Filter</a></li>
            <li><a tabindex="-1" id="clearFilter">Clear Filter</a></li>
        </ul>

Then you will need to add this JS file:

var theID = 0;
var theIndex;
$(function () {
    (function ($, window) {
        $.fn.contextMenu = function (settings) {
            return this.each(function () {
                // Open context menu
                $(this).on("contextmenu", function (e) {
                    // return native menu if pressing control
                    if (e.ctrlKey) return;
                    //open menu
                    var $menu = $(settings.menuSelector)
                        .data("invokedOn", $(e.target))
                        .show()
                        .css({
                            position: "absolute",
                            left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
                            top: getMenuPosition(e.clientY, 'height', 'scrollTop')
                        })
                        .off('click')
                        .on('click', '#filter', function (e) {
                            $menu.hide();
                            theID = 0;              
                            var $invokedOn = $menu.data("invokedOn");
                            theIndex = $invokedOn.index();
                            var $selectedMenu = $(e.target);                            
                            settings.menuSelected.call(this, $invokedOn, $selectedMenu)                   
                        })
                    .on('click', '#clearFilter', function (e) {
                        $menu.hide();
                        theID = 1;
                        var $invokedOn = $menu.data("invokedOn");
                        var $selectedMenu = $(e.target);
                        settings.menuSelected.call(this, $invokedOn, $selectedMenu)                   
                    });
                    return false;
                });
                //make sure menu closes on any click
                $('body').click(function () {
                    $(settings.menuSelector).hide();
                });
            });
            function getMenuPosition(mouse, direction, scrollDir) {
                var win = $(window)[direction](),
                    scroll = $(window)[scrollDir](),
                    menu = $(settings.menuSelector)[direction](),
                    position = mouse + scroll;
                // opening menu would pass the side of the page
                if (mouse + menu > win && menu < mouse)
                    position -= menu;
                return position;
            }
        };
    })(jQuery, window);
})
var table1 = "#yourtableid";
var table2 = "#yourtableid";
var table3 = "#yourtableid";
var table4 = "#yourtableid";
var table5 = "#yourtableid";
var theTables = [table1,table2,table3,table4,table5];
$.each(theTables, function (index, value) {
    var table = $(value).DataTable();
    $(value + " td").contextMenu({
        menuSelector: "#contextMenu",
        menuSelected: function (invokedOn, selectedMenu) {
            var msg = invokedOn.text();
            msg = msg.split(',').join('');
            switch (theID) {
                case 0:
                    table
                        .column(theIndex)
                        .search('^' + msg + '$', true)
                        .draw();
                    break;
                case 1:
                    table
                        .search('')
                        .columns().search('')
                        .draw();
                    break;
            }
        }
    });
});