Column search on top of table with responsive table

jigar311982

Hello,

I have prepared table with server side script for column search, everything works fine, but stuck with one issue for responsive table,
Below is my table,

<table class="table table-striped table-bordered table-hover dt-responsive nowrap" width="100%" id="3table">
                                    <thead>
                                        <tr>
                                            <th> ID</th>
                                            <th>Number</th>
                                            <th>Number1</th>
                                            <th> Number2</th>
                                            <th>Plant</th>
                                            <th>Part</th>
                                            <th>Description</th>
                                            <th>Quantity</th>
                                            <th>Date</th>
                                            <th>To</th>
                                            <th>Date3</th>
                                            <th>Transport</th>
                                            <th>Docket</th>
                                        </tr>
                                    </thead>
                                    <thead>
                                        <tr>
                                            <td><input type="text" data-column="1"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="2"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="3"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="4"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="5"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="6"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="7"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="8"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="9"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="10"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="11"  class="search-input-text" placeholder="Search"></td>
                                            <td><input type="text" data-column="12"  class="search-input-text" placeholder="Search"></td>
                                        </tr>
                                    </thead>
                                    
                                    <tbody> 
                                    </tbody>
                                </table>

I had kept another <thead> with <td> for search box, then sending search value with below jquery code

// Apply the search

$('.search-input-text').on( 'keyup click', function () {   // for text boxes
    var i =$(this).attr('data-column');  // getting column index
    var v =$(this).val();  // getting search input value
    var table = $('#3table').DataTable();
    table.columns(i).search(v).draw();
} );

Now when i change resolution, search boxes are not changed resolution as other columns and rows, All search boxes are not wrapping, but showing in 1 row only. if i remove 2nd <thead>, then my datatable is completely responsive,means i can see + sign for first column for columns which are getting hidden.

How can i make search boxes responsive as well?

Thanks,