would like some columns to be smart search with the state column being a drop down.

jim54729

I have a table with one global search box, and 5 more search boxes for columns. Great tool. But now I would like the State column to be a drop down instead. then hide the state column. Here is my script so far.

<script type="text/javascript">
      function filterGlobal () {
    $('#mymatrixTable').DataTable().search(
        $('#global_filter').val(),
        // $('#global_regex').prop('checked'),
        $('#global_smart').prop('checked')
    ).draw();
}
 
function filterColumn ( i ) {
    $('#mymatrixTable').DataTable().column( i ).search(
        $('#col'+i+'_filter').val(),
        // $('#col'+i+'_regex').prop('checked'),
        $('#col'+i+'_smart').prop('checked')
    ).draw();
}
 
$(document).ready(function() {
    $('#mymatrixTable').DataTable( {
      responsive: true,
      dom: 'rtip',      
      "order": [[ 2, 'asc' ], [ 10, 'desc' ],[ 11, 'desc' ]]
    } );

     
 
    $('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
    } );
 
    $('input.column_filter').on( 'keyup click', function () {
        filterColumn( $(this).parents('tr').attr('data-column') );
    } );
} );
    </script>

I am not sure where I found the example to create this.
Thanks in advance.

kthorngren

Looks like you used combo of the search input and search API /regex examples. from this page:
https://datatables.net/examples/api/index.html

There is a select example that you can leverage. Instead of putting the select input in the footer you will need to place it somewhere else on the page if you are hiding the column.

Kevin

jim54729

Thanks kthorngren, That was not the source i had found, but might be better, so I am trying to merge the two without much luck.
I feel my lack of javascript is not good enough for the merge, but here is where I am so far:

$(document).ready(function() {
     $('#example').DataTable({
             initComplete: function() {
                 this.api().columns([1, 3]).every(function() {
                     var column = this;
                     var select = $('<select><option value=""></option></select>')

                     .appendTo($(column.footer()).empty())
                         .on('change', function() {
                             var val = $.fn.dataTable.util.escapeRegex(
                                 $(this).val()
                             );

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

                     column.data().unique().sort().each(function(d, j) {
                         select.append('<option value="' + d + '">' + d + '</option>')
                     });
                 });
                 var title = $(this).text();
                 this.api().columns([1, 3]).every(function() {
                     $(this).html('<input type="text" placeholder="Search ' + title + '" />');

                     // DataTable
                     //var table = $('#example').DataTable();

                     // Apply the search

                     var that = this;

                     $('input', this.footer()).on('keyup change', function() {
                         if (that.search() !== this.value) {
                             that
                                 .search(this.value)
                                 .draw();
                         }
                     });
                 });

             });

     }




 });

colin

Hi @jim54729 ,

This example here should do what you want - it's based on your code but fixed a few formatting problems and added the input elements.

Cheers,

Colin

jim54729

Thanks Colin and kthorngren That is exactly what i was looking for, and thanks for the help mixing the 2 features together.