Using Checkboxes to sort columns

RekhaMani777

This post is more like a code snippet. I was able to extend the search option to enable check boxes with in the column header and extend search on click

The dynamic search, happens on click and the function looks like this

$('#paginated').DataTable({
         
    "dom": 'B<f<t>ip>',
initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        var cond=$(column.header()).text();
        //  alert(cond.length);
        if(cond.length >1  )
        {
        //  alert(cond);
            if ( cond =='Program ') 
            {
            var ddmenu = cbDropdown($(column.header()).empty())
              .on('change', ':checkbox', function() {
                var vals = $(':checked', ddmenu).map(function(index, element) {
                    //alert($(element).val());
                  return $.fn.dataTable.util.escapeRegex($(element).val());
                }).toArray().join('|');

                column
                  .search(vals.length > 0 ? '\W*(' + vals + ')\W*' : '', true, false)
                  .draw();
                  //console.log(vals);
                //  alert(this.value);
                  if(vals === ""){
                  $(this).parent().parent().parent().removeClass("factive");
                  }else{             $(this).parent().parent().parent().addClass("factive");
                  }
                  //change callback
                 // this enables the search 
              });
                  
             
            
                //  var // wrapped // this section adds the custom check box labels and values
//              $label = $('<label>'),
//              $text = $('<span>', {
//                text: 'All Programs'
//              }),
//              $cb = $('<input>', {
//                type: 'checkbox',
//                value: '*',
//                checked:true
//              });
//
//            $text.appendTo($label);
//            $cb.appendTo($label);
//
//            ddmenu.append($('<li>').append($label));  
                
                var // wrapped
                $label = $('<label>'),
                $text = $('<span>', {
                  text: 'check box1'
                }),
                $cb = $('<input>', {
                  type: 'checkbox',
                  value: 'check box value',
                  checked:true
                });

              $text.appendTo($label);
              $cb.appendTo($label);

              ddmenu.append($('<li>').append($label));  
                
                var // wrapped
                $label = $('<label>'),
                $text = $('<span>', {
                  text: 'check box2'
                }),
                $cb = $('<input>', {
                  type: 'checkbox',
                  value: 'check box value',
                  checked:true
                });

              $text.appendTo($label);
              $cb.appendTo($label);

              ddmenu.append($('<li>').append($label));
                
                var // wrapped
                $label = $('<label>'),
                $text = $('<span>', {
                  text: 'check box3'
                }),
                $cb = $('<input>', {
                  type: 'checkbox',
                  value: 'check box value',
                  checked:true
                });
                $text.appendTo($label);
                $cb.appendTo($label);
                ddmenu.append($('<li>').append($label));
                
                var // wrapped
                $label = $('<label>'),
                $text = $('<span>', {
                  text: 'check box4'
                }),
                $cb = $('<input>', {
                  type: 'checkbox',
                  value: 'check box value',
                  checked:true
                });

                $text.appendTo($label);
                $cb.appendTo($label);

                ddmenu.append($('<li>').append($label));

                var // wrapped
                $label = $('<label>'),
                $text = $('<span>', {
                  text: 'check box5'
                }),
                $cb = $('<input>', {
                  type: 'checkbox',
                  value: 'check box value',
                  checked:true
                });

                $text.appendTo($label);
                $cb.appendTo($label);

                ddmenu.append($('<li>').append($label));

                
                
             
        } 

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

RekhaMani777

css for the above

.cb-dropdown-wrap { 
      min-height: 35px;
      max-height: 25px;
      transition: max-height 0.20s ease;
      overflow-y: auto;
      overflow-x:hidden;
      border: 1px solid #888;
      position:absolute;
      z-index: 1;
      background-color: #fff;
      margin-top: -22px;
      margin-left:-10px;
      width:135px;
      -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
        border-radius: 5px;
    }

    .cb-dropdown-wrap:hover {  
      height: auto;
      max-height: 80px; /* At most, around 3/4 visible items. */
    }

    .cb-dropdown,
    .cb-dropdown li {
      margin:0px 0px 10px 0px;
      padding: 2px;
      list-style: none;
      border-bottom: 1px solid #eee;
    }

    .cb-dropdown li label {
     /* padding: 3px 0;*/
      display: block;
      position: relative;
      cursor: pointer;
    }

    .cb-dropdown li label > input {
      position: absolute;
      right: 0;
      top: 0;
      width:15px;
    }

    .cb-dropdown li label > span {
      display: block;
    /*  margin-left: 3px;*/
     /* margin-bottom:3px;*/
      margin-top: 0px !important;
    /*  margin-right: 20px;*/ /* At least, width of the checkbox. */
      padding: 0px !important;
      font-family: sans-serif;
      font-size: 0.8em;
      font-weight: normal;
      text-align: left;
      width:110px;
    }

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Thanks for posting,

Colin