Serching by columns whith checkboxes

laynier

If I am using a simple search by column like the code below:

$(document).ready(function() {
$('#example1 thead tr').clone(true).appendTo( '#example1 thead' );
$('#example1 thead tr:eq(1) th').each( function (i) {
 
    var title = $(this).text();
    if(title != 'Action'){
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
 
    $( 'input', this ).on( 'keyup change', function () {
        if ( table.column(i).search() !== this.value ) {
            table
                .column(i)
                .search( this.value )
                .draw();
        }
    } );
} else $(this).text('');
}
);
 
 var table = $('#example1').DataTable( );
});

But some colums are checkboxes, only marked or not, how can I achieve the same that with text columns?
Write true or false did not work out...

I have tried with:

 if(title == 'Active'){
                        $(this).html('<select id="select_yn" class="form-control form-control-sm" >' +
                            '<option value="" selected >Select</option>' +
                            '<option value= true >Yes</option>' +
                            '<option value= false>No</option>' +
                            '</select>');
                        $('#select_yn', this).on('keyup change', function () {                 
                            if (table.column(i).search() !== this.value) {
                                table
                                    .column(i)
                                    .search(parseInt(this.value))
                                    .draw();
                            }
                        });
}

That failed... Also tried usin 0 and 1 in the values of the option, nothing so far... any idea?

allan

For live Dom elements, see this example.

Allan

laynier

They are not live Dom elements. It is an index table, not editable fields. They arrive checked or not, you can not change it. Just want to search for all checked or not.

kthorngren

I would look at using columns.render to create orthogonal data for the search and maybe sort operations. If checked return 1 or return 0 if not checked as an example. How to check for this si based on the exact data you are fetching. If you want help please provide a test case example of your data.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

laynier

This is the example of what I tried to do:
http://live.datatables.net/bixezuqo/2/edit?html,js,console,output
http://live.datatables.net/bixezuqo/2/embed?html,js,console,output

kthorngren

Here is the updated example:
http://live.datatables.net/bixezuqo/3/edit

I added this code:

    columnDefs: [
      {
        targets: 3,
        render: function (data, type, row) {
          
          if (type === 'filter') {
            return $(data).prop('checked') ? '1' : '0';
          }
          return data;
        }
      }

If the orthogonal data type is filter then return 1 if checked else 0.

Kevin