How to apply advanced search on datatable using input text and select?

Ali-aati

Hi, I tried many of different way to apply advanced search on table using Datatable with all of input text and dropdown select but not working with me this is example of my code could anyone help me with my problem and this I want When I fill all the search filed than click on filter button show data in table.

http://live.datatables.net/piqidoqo/636/edit

colin

Hi @Ali-aati ,

It looks like you don't have any click event on the 'Filter' button, so it won't do anything!

What you need to do in that event handler is take your search elements, and apply the search to the relevant column. Something like:

$('.fa-filter').click(function() {
  table.column(1).search($('#JobID:selected').val()));
  // other columns filters similarly
  table.draw();
})

Hope that helps,

Cheers,

Colin

Ali-aati

Hi @colin

Now I used Search API (regular expressions) Here And everything work fine except three things,
One select dropdown not working when I sleeted in data from dropdown,
second when I search for date like 05/22/2018 to 07/13/2018 in input from work but in to input not working, and
the last thing I need to use button for filter. how cloud do that please I need help for those things.

this is my new example http://live.datatables.net/piqidoqo/646/edit

 function filterGlobal () {
    $('#ex').DataTable().search(
        $('#global_filter').val(),

    ).draw();
    }

    function filterColumn ( i ) {
        $('#ex').DataTable().column( i ).search(
            $('#col'+i+'_filter').val()
        ).draw();
    }

    $(document).ready(function() {
        $('#ex').DataTable();

        $('input.global_filter').on( 'keyup click', function () {
            filterGlobal();
        } );

        $('input.column_filter').on( 'keyup click', function () {
            filterColumn( $(this).parents('div').attr('data-column') );
        } );
    } );

function ClearFields(){
document.getElementById("col0_filter").value = "";
document.getElementById("col2_filter").value = "";
document.getElementById("col3_filter").value = "";
}

Ali-aati

I fixed the Select downdrop but when i select all should show all the data. how can I do that?
this new link
http://live.datatables.net/piqidoqo/648/edit

colin

Hi @Ali-aati ,

The problem is because you're searching for "All" in the table, which doesn't match anything. You could either detect that before you applying the search and change the value to be "", or you could apply an attribute to each option which you search on (for All it would be "", for the rest, it would be value).

Hope that helps,

Cheers,

Colin

Ali-aati

Thank you so much @colin
I used this code and It worked.
` <option selected value> -- All -- </option>``

could you please help me for this one
when I search for date like 05/22/2018 to 07/13/2018
the from 05/22/2018 work but 07/13/2018 input to not working how could fix that.

  function filterGlobal () {
    $('#ex').DataTable().search(
        $('#global_filter').val(),

    ).draw();
    }

    function filterColumn ( i ) {
        $('#ex').DataTable().column( i ).search(
            $('#col'+i+'_filter').val()
        ).draw();
    }

    $(document).ready(function() {
        $('#ex').DataTable();

        $('input.global_filter').on( 'keyup click', function () {
            filterGlobal();
        } );

        $('input.column_filter').on( 'keyup click', function () {
            filterColumn( $(this).parents('div').attr('data-column') );
        } );
    } );

        $('select.column_filter').on('change', function () {
            filterColumn( $(this).parents('div').attr('data-column') );
        } );

http://live.datatables.net/piqidoqo/648/edit

colin

Hi @Ali-aati ,

This plugin here should help, it's searching for date ranges,

Cheers,

Colin