Using Checkboxes to sort columns

Using Checkboxes to sort columns

RekhaMani777RekhaMani777 Posts: 2Questions: 0Answers: 0
edited December 2021 in SearchBuilder

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.

Replies

  • RekhaMani777RekhaMani777 Posts: 2Questions: 0Answers: 0
    edited December 2021

    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.

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    Thanks for posting,

    Colin

Sign In or Register to comment.