File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div id="demo">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="display"
    id="example">
        <thead>
            <tr>
                <th>Title</th>
                <th>Genre</th>
                <th>Year</th>
                <th>Director</th>
                <th>Stars</th>
                <th>Runtime</th>
                <th>Color</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>The Exorcist</td>
                <td>Horror</td>
                <td>1973</td>
                <td>William Friedkin</td>
                <td>Linda Blair, Ellen Burstyn, Max von Sydow, Lee J. Cobb</td> 
                <td class="center"></td>
                <td class="center">Yes</td>
            </tr>
            <tr>
                <td>Repossessed</td>
                <td>Comedy, Fantasy</td>
                <td>1990</td>
                <td>Bob Logan</td>
                <td>Linda Blair, Ned Beatty, Leslie Nielsen </td>
                <td class="center"></td>
                <td class="center">Yes</td>
            </tr>
            <tr>
                <td>Dawn of the Dead</td>
                <td>Horror, Thriller</td>
                <td>1978</td>
                <td>George A. Romero</td>
                <td>David Emge, Ken Foree, Scott H. Reiniger</td>
                <td class="center"></td>
                <td class="center">Yes</td>
            </tr>
            
        </tbody>
    </table>
</div>
​
​
<script>
$(document).ready(function () {
    var oTable = $('#example').dataTable({
        'bPaginate': false
    });
​
    // Populate values
    var $rows = oTable.fnGetNodes();
    var values = {};
    var colnums = [2, 5];
​
    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()) {
                    returnValue = true;
                    return false; // exit loop early
                }
            });
​
            return returnValue;
        }
​
        if (!checked.length) return true;
        return false;
    });
});
​
</script>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready( function () {
  var table = $('#example').DataTable();
} );
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers