Need a Column with Select List of check boxes

Jo0

Is it possible to implement a select list with checkboxes that will allow multiple value filtering on that column? I have column select list filtering working, I'm just trying to extend it to work with checkboxes and multiple values

kthorngren

Yes, I have a table displaying trace log events with different log levels. I setup checkboxes to filter which log levels are displayed. You will create a search plugin to build this. Here is a search plugin blog tutorial:
https://datatables.net/blog/2014-08-26

My code uses the legacy commands. I wrote it before I knew the difference You may want to use the current command versions. Since I wrote this early in my learning it may not be the best algorithm but it works.

I store the checkbox state in the DB for each user then when the page is opened I get the saved checkbox values and build the HTML setting the checkboxes appropriately. Then I use the below search plugin to filter column 2 based on the checked items.

    $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
        var checked = [];
        $('.filter-column').each(function () {   //filter-column class is assigned to the checkboxes
            var $this = $(this);
            if ($this.is(':checked')) checked.push($this);   //get all checked checkboxes
        });
        if (checked.length) {
            var returnValue = false;
            $.each(checked, function (i, $obj) {
                //$obj..data('colnum') is 2 (the column i'm interested in) and aData[$obj.data('colnum')] is the data in column 2
               //if the value in the column equals the value of the checkedbox ($obj.val()) set returnValue = true
                if (aData[$obj.data('colnum')] == $obj.val()) {
                    returnValue = true;
                    return false; // exit loop early if match found
                }
            });

            return returnValue;
        }

        if (!checked.length) return true;

        return false;
    });

Hope this helps you get started.

Kevin

Jo0

I ended up just running with the Select Filtering example and changing it to add a collection of checkboxes. Then using JS and css to hide and display the list of checkboxes on select.

var expanded = false;
function showCheckBoxes() {
    var checkboxes = document.getElementById('checkboxes');
    if (!expanded) {
        document.getElementById('selectbox').style.border = "1px #2C92F7 solid";        
        checkboxes.style.display = "block";
        expanded = true;
    }
    else {
        document.getElementById('selectbox').style.border = "";
        checkboxes.style.display = "none";
        expanded = false;
    }
}

$("#exampletfoot th").each(function (i) {
            if ($(this).text() == "Header2") {
                var select = $('<div class="multiselect"><div id="selectbox" class="selectBox" onclick="showCheckBoxes()"><select><option value=""></option></select><div class="overSelect"></div></div>')
                 .appendTo($(this).empty());

                var checkboxlist = "";
                table.column(i).data().unique().sort().each(function (d, j) {
                    checkboxlist += '<label for="' + d +'"><input type="checkbox" value="' + d + '"checked>' + d + '</label>';
                });

                
                select.append('<div id="checkboxes">' + checkboxlist + '</div></div>');
                document.getElementById('checkboxes').style.display = 'none';             

            }

            if ($(this).text() == "Header4" || $(this).text() == "Header5") {
                var select = $('<select><option value=""></option></select>')
                 .appendTo($(this).empty())
                 .on('change', function () {
                     var val = $(this).val();

                     table.column(i)
                           .search(val ? '^' + $(this).val() + '$' : val, true, false)
                           .draw();
                 });

                table.column(i).data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });
            }
        });

tfoot option {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

tfoot {
    display: table-header-group;
}

.multiselect {
    width: 140px;
}

.selectBox {
    position: relative;
    width: 140px;
}

.selectBox select {
    width: 140px;
}

.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#checkboxes {
    border: 1px #2C92F7 solid;   
    background-color: #ffffff;
}

#checkboxes label {
    font-family: Arial;
    font-size: 13px;
    font-weight:400;
    color: #676a6c;
    display: block;
}

#checkboxes label:hover {
    display: block;
    background-color: #2C92F7;
}