Filter dataTables

How to create checkbox filters based on column values

by vol7ron

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowGrouping.js"></script>
<div id="demo">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="display"
    id="example">
        <thead>
            <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Status</th>
                <th>Engine</th>
                <th>CSS</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer 4.0</td>
                <td>Win 95+</td>
                <td>Legacy</td>
                <td class="center">4</td>
                <td class="center">X</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer 5.0</td>
                <td>Win 95+</td>
                <td>Legacy</td>
                <td class="center">5</td>
                <td class="center">C</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer 5.5</td>
                <td>Win 95+</td>
                <td>Legacy</td>
                <td class="center">5.5</td>
                <td class="center">A</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer 6</td>
                <td>Win 98+</td>
                <td>Legacy</td>
                <td class="center">6</td>
                <td class="center">A</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer...

CSS

div#demo {
    margin-top:50px;
}
div#example_filter {
    width:100%;
}
.filter-container {
    display:inline-block;
    margin-right:1em;
}
tr:hover th, tr:hover td {
    background-color:#ebebeb;
    background-image:none;
}
td {
    height:26px;
    padding:0px 0px 0px 20px !important;
    text-align:left;
    border-bottom:1px solid #d0d0d0;
    vertical-align:middle;
    color:#555555;
    background-color:#ffffff;
}
td.group {
    background-color: #d5eafd !important;
    border-bottom: 1px solid #94bafd;
    border-top: 1px solid #94bafd;
}
td.expanded-group {
    background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/minus.jpg") no-repeat scroll left center transparent;
}
tr:hover td.expanded-group {
    background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/minus.jpg") no-repeat scroll left center #c0e1ff !important;
}
td.collapsed-group {
    background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/plus.jpg") no-repeat scroll left center transparent;
}
tr:hover td.collapsed-group {
    background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/plus.jpg") no-repeat scroll left center #c0e1ff !important;
}
.DataTables_sort_wrapper span {
    float: right;
}
.ui-icon {
    background-image: url("http://jquery-ui.googlecode.com/svn-history/r3145/branches/labs/scrollable/ui/css/smoothness/images/ui-icons_454545_256x240.png");
    height: 16px;
    width: 16px;
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
    text-indent: -99999px;
}
.ui-icon-closethick {
    background-position: -96px -128px;
}
.ui-icon-circle-close {
    background-position: -32px -192px;
}
.float-right {
    float: right;
    margin: 4px 5px 0px 0px;
}
.float-left {
    float: left;
    margin: 4px 5px 0px 4px;
}
.expandedOrCollapsedGroup {
    width: 125px;
    float: left;
    margin: 0px 0px 0px 25px;
}

JavaScript

$(document).ready(function () {
    var oTable = $('#example').dataTable({
        'bPaginate': false
    });

    // Populate values
    var $rows = oTable.fnGetNodes();
    var values = {};
    var colnums = [2, 4];

    for (var col = 0, n = colnums.length; col < n; col++) {

        var colnum = colnums[col];
        if (typeof values[colnum] === "undefined") values[colnum] = {};

        // Create Unique List of Values
        $('td:nth-child(' + colnum + ')', $rows).each(function () {
            values[colnum][$(this).text()] = 1;
        });

        // Create Checkboxes
        var labels = [];
        $.each(values[colnum], function (key, count) {
            var $checkbox = $('<input />', {
                'class': 'filter-column filter-column-' + colnum,
                    'type': 'checkbox',
                    'value': key
            });
            var $label = $('<label></label>', {
                'class': 'filter-container'
            }).append($checkbox).append(' ' + key);
            $checkbox.on('click', function () {
                oTable.fnDraw();
            }).data('colnum', colnum);
            labels.push($label.get(0));
        });
        var $sorted_containers = $(labels).sort(function (a, b) {
            return $(a).text().toLowerCase() > $(b).text().toLowerCase();
        });
        $('#demo').prepend($sorted_containers);
        $sorted_containers.wrapAll($('<div></div>', {
            'class': 'checkbox-group checkbox-group-column-' + colnum
        }));
    }

    $.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
        var checked = [];
        $('.filter-column').each(function () {
            var $this = $(this);
            if ($this.is(':checked')) checked.push($this);
        });

        if (checked.length) {
            var returnValue = false;
            $.each(checked, function (i, $obj) {
                if (aData[$obj.data('colnum') - 1] == $obj.val()) {
                   ...