jQuery 数据表列搜索

Question

I am using jQuery Datatable and I am using it column search feature.

I have added it successfully in the header but it's coming after thead titles I need it before thead titles while by using table eq(0) I am able to place it before titles but sorting is coming with it.

 $('#myApprovalTable thead tr').clone(true).appendTo('#myApprovalTable thead'); $('#myApprovalTable thead tr:eq(1) th').each(function(i) { var title = $(this).text(); //$(this).html('<input type="text" placeholder="Search" />'); if (title == 'Actions') { $(this).hide(); } $(this).html('<input type="text" placeholder="' + title + '" />'); $('input', this).on('keyup change', function() { if (myApproval.column(i).search() !== this.value) { myApproval .column(i) .search(this.value) .draw(); } }); }); var myApproval = $('#myApprovalTable').DataTable({ orderCellsTop: true, dom: 'Bfrtip', buttons: [{ text: 'Reset Filter', action: function(e, dt, node, config) { $('#myApprovalTable input').val('').change(); } }], language: { search: "_INPUT_", searchPlaceholder: "Search..." } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script> <table id="myApprovalTable" class="display table-responsive" style="width:100%"> <thead> <tr> <th>title1</th> <th>title2</th> <th>title3</th> <th>title4</th> <th>title5</th> <th>title6</th> <th>title7</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> </tbody> </table>

Answer 1

Changing your jQuery selector so it selects the first row did the trick.

$('#myApprovalTable thead tr:eq(1) th')

to

$('#myApprovalTable thead tr:eq(0) th')

EDIT: To make sure sorting works as intended I did the following:

• I switched the order of your code. First the Datatable is initialized before adding the search logic.
• Also I removed the true parameter of the clone method to prevent event handlers of Datatable being cloned
• Last I prepended the cloned elements with prependTo instead of appendTo() so the cloned table heading is being changed instead of the original one.

 var myApproval = $('#myApprovalTable').DataTable({ orderCellsTop: true, dom: 'Bfrtip', buttons: [{ text: 'Reset Filter', action: function(e, dt, node, config) { $('#myApprovalTable input').val('').change(); } }], language: { search: "_INPUT_", searchPlaceholder: "Search..." } }); $('#myApprovalTable thead tr').clone().prependTo('#myApprovalTable thead'); $('#myApprovalTable thead tr:eq(0) th').each(function(i) { var title = $(this).text(); //$(this).html('<input type="text" placeholder="Search" />'); if (title == 'Actions') { $(this).hide(); } $(this).html('<input type="text" placeholder="' + title + '" />'); $('input', this).on('keyup change', function() { if (myApproval.column(i).search() !== this.value) { myApproval .column(i) .search(this.value) .draw(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script> <table id="myApprovalTable" class="display table-responsive" style="width:100%"> <thead> <tr> <th>title1</th> <th>title2</th> <th>title3</th> <th>title4</th> <th>title5</th> <th>title6</th> <th>title7</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> </tbody> </table>