how to use same page multi table drop down filter option also using header section?

Ahasan

i also below the code, if coded write filter drop down one table show another table filter doesn't work.

$(document).ready(function() {
     
    var table = $('#allUsers').DataTable();
   var table1 = $('#addedUsers').DataTable();
 
    $("#allUsers tfoot th").each( function ( i ) {
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(this).empty() )
            .on( 'change', function () {
                var val = $(this).val();
 
                table.column( i )
                    .search( val ? '^'+$(this).val()+'$' : val, true, false )
                    .draw();
            } );
 
        table.column( i ).data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
    } );
    
    $("#addedUsers tfoot th").each( function ( i ) {
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(this).empty() )
            .on( 'change', function () {
                var val = $(this).val();
 
                table1.column( i )
                    .search( val ? '^'+$(this).val()+'$' : val, true, false )
                    .draw();
            } );
 
        table1.column( i ).data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
    } );
} );

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

colin

Hi @Ahasan ,

I just tried it here with your code, and it's working as expected for me. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

Ahasan

Thanks for your support.
when i use this code can't work properly
please see link
https://prnt.sc/oukpg7

below code:

Employee ID	Full Name	Job Title
	alexfaisalomar	Marketing CoordinatorMedical Assistant.Web Designer.
2018005	faisal	Medical Assistant.
2018003	alex	Marketing Coordinator
2018006	omar	Web Designer.

Employee ID	Full Name	Job Title
	alexfaisalomar	Marketing CoordinatorMedical Assistant.Web Designer.
2018005	faisal	Medical Assistant.
2018003	alex	Marketing Coordinator
2018006	omar	Web Designer.

$(document).ready(function() {

 var table = $('#allUsers').DataTable(); 


$("#allUsers tfoot th").each( function ( i ) {
    var select = $('<select><option value=""></option></select>')
        .appendTo( $(this).empty() )
        .on( 'change', function () {
            var val = $(this).val();

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

    table.column( i ).data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' );
    } );
} );

 var table1 = $('#addedUsers').DataTable();
  $("#addedUsers tfoot th").each( function ( i ) {
      var select = $('<select><option value=""></option></select>')
          .appendTo( $(this).empty() )
          .on( 'change', function () {
              var val = $(this).val();

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

      table1.column( i ).data().unique().sort().each( function ( d, j ) {
         select.append( '<option value="'+d+'">'+d+'</option>' );
      } );
 } );

} );

Ahasan

error

colin

Hi @Ahasan ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Ahasan

thanks for support i read your rules