regarding multiple tables and column wise search

sagar413

I ahd 3 tables. I want to imp-lement column wise search in 3 tables. But at a time only one table is displaying based on check box.

$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#dtab tfoot th').each( function () {
var title = $('#dtab thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

            // DataTable

            $('#dtab').dataTable( {
                "sScrollY": "200px",
                "bScrollCollapse": true,
                "bPaginate": true,
                "bJQueryUI": true,
                "bAutoWidth": false,
                "aoColumns": [
                              { sWidth: '9%' },
                              { sWidth: '9%' },
                              { sWidth: '9%' },
                              { sWidth: '9%' },
                              { sWidth: '9%' },
                              ]

            } );

            var table = $('#dtab').DataTable();
               // Apply the search
            table.columns().eq( 0 ).each( function ( colIdx ) {
                $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
                    table
                        .column( colIdx )
                        .search( this.value )
                        .draw();
                } );
            } );


        // Setup - add a text input to each footer cell
                $('#ptab tfoot th').each( function () {
                    var title = $('#ptab thead th').eq( $(this).index() ).text();
                    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
                } );

                // DataTable


                $('#ptab').dataTable( {
                    "sScrollY": "200px",
                    "bScrollCollapse": true,
                    "bPaginate": true,
                    "bJQueryUI": true,
                    "bAutoWidth": false,

                } );

                var table = $('#ptab').DataTable();
                // Apply the search
                table.columns().eq( 0 ).each( function ( colIdx ) {
                    $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
                        table
                            .column( colIdx )
                            .search( this.value )
                            .draw();
                    } );
                } );


                // Setup - add a text input to each footer cell
                $('#otab tfoot th').each( function () {
                    var title = $('#otab thead th').eq( $(this).index() ).text();
                    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
                } );

                // DataTable


                $('#otab').dataTable( {
                    "sScrollY": "200px",
                    "bScrollCollapse": true,
                    "bPaginate": true,
                    "bJQueryUI": true,


                } );

                var table = $('#otab').DataTable();
                // Apply the search
                table.columns().eq( 0 ).each( function ( colIdx ) {
                    $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
                        table
                            .column( colIdx )
                            .search( this.value )
                            .draw();
                    } );
                } );
        } );

I want to make sure the header width and my table data width should be same and it should adjust automatically. what changes i can do in this script