为什么dataTable搜索仅在表的第一行上工作

Question

I have a dataTable whose search is working on only first row of the table .

Question: why search is not working on every row, It is acting for first row only?why

For better clarity please see this jsFiddle : https://jsfiddle.net/pkxmnh2a/30/

Snippet:

 $(document).ready(function () { var table = $('#examples').DataTable(); $('a.toggle-vis').on('click', function (e) { e.preventDefault(); var column = table.column($(this).attr('data-column')); column.visible(!column.visible()); }); $('#examples tfoot th').each(function () { var title = $('#examples thead th').eq($(this).index()).text(); $(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>'); }); table.columns().eq(0).each(function (colIdx) { $('input', table.column(colIdx).footer()).on('keyup change', function () { table.column(colIdx) .search(this.value) .draw(); }); }); }); 

 .widthind{ width: 30px; height: 30px; background-color: black; color: white; } form { margin: 0; padding: 0; display: -webkit-inline-box; } 

 <link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-boardered" id="examples"> <thead class="thead-dark"> <tr> <th>Id</th> <th>Customer Name</th> <th>Description</th> <th>Order Number</th> <th>PO Number</th> <th>Quantity</th> <th>Due Date</th> <th>Billing Address</th> <th>Shipping Address</th> <th>Installing Address</th> <th>Design</th> <th>Production</th> <th>Shipping</th> <th>Install</th> <th>Production Manager</th> <th>Project manager</th> <th>Sales Representatives</th> <th>Shipping Method</th> <th>Created At</th> <th>Status</th> <td style="display:none;"></td> </tr> </thead> <tbody> <tr id="deletetr21"> <td class="notIdClass">2PslfYy</td> <td class="editableDataClass" data-edit="21" data-table="customer_name">dsndfbbd ejaz</td> <td class="editableDataClass" data-edit="21" data-table="description"></td> <td class="editableDataClass" data-edit="21" data-table="order_number">2061</td> <td class="editableDataClass" data-edit="21" data-table="po_number"></td> <td class="editableDataClass" data-edit="21" data-table="quantity"></td> <td class="editableDataClass" data-edit="21" data-table="due_date"></td> <td class="editableDataClass" data-edit="21" data-table="billing_address"></td> <td class="editableDataClass" data-edit="21" data-table="shipping_address"></td> <td class="editableDataClass" data-edit="21" data-table="installing_address"></td> <td class="editableDataClass" data-edit="21" data-table="design"></td> <td class="editableDataClass" data-edit="21" data-table="production"></td> <td class="editableDataClass" data-edit="21" data-table="shipping"></td> <td class="editableDataClass" data-edit="21" data-table="install"></td> <td class="editableDataClass" data-edit="21" data-table="production_manager"></td> <td class="editableDataClass" data-edit="21" data-table="project_manager"></td> <td class="editableDataClass" data-edit="21" data-table="sales_representative"></td> <td class="editableDataClass" data-edit="21" data-table="shipping_method"></td> <td data-table="workflow" style="color:#0277bd">16-01-2018</td> <td class="statusNotClass"> <select data-edit="21" data-table="status" class="defineWorkflow"> <option value="">-- Select --</option> <option value="progress">Progress</option> <option value="pending">Pending</option> <option value="completed">Completed</option> </select> </td> <td> </td></tr></tbody><thead id="alsoDeleteThead21" class="thead-dark excludeAction" style="background-color: !important;"> <tr><th style="width: 100% !important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edit Option</th> <th colspan="50 "> <a> <form action="http://localhost:8000/send_customer_status" method="POST"> <input type="hidden" name="_token" value="DbhEfiBiILxfL7GeRivtIsVw2U1VAyxcWAqw3WaN"> <input type="hidden" name="job_id" value="21"> <input type="hidden" name="customer_id" value="9"> <button class="btn btn-danger send-status " title="Status Sent On - ">Send Status </button> </form></a> <a href="#" class="btn btn-danger send-quotation">Send Quotation</a> <a href="#" class="btn btn-danger send-invoice">Send in Voice</a> <a href="#" class="btn btn-danger delete-customer" data-delete="21">Delete</a></th> </tr></thead> <tbody><tr id="deletetr22"> <td class="notIdClass">AnsAhKR</td> <td class="editableDataClass" data-edit="22" data-table="customer_name">Raj Laxmi</td> <td class="editableDataClass" data-edit="22" data-table="description">45x56 led board</td> <td class="editableDataClass" data-edit="22" data-table="order_number">2164</td> <td class="editableDataClass" data-edit="22" data-table="po_number">45231</td> <td class="editableDataClass" data-edit="22" data-table="quantity"></td> <td class="editableDataClass" data-edit="22" data-table="due_date">2018/01/15 16:23</td> <td class="editableDataClass" data-edit="22" data-table="billing_address"></td> <td class="editableDataClass" data-edit="22" data-table="shipping_address"></td> <td class="editableDataClass" data-edit="22" data-table="installing_address"></td> <td class="editableDataClass" data-edit="22" data-table="design">45x56 led board, 18x90 flex, 500 brouchers</td> <td class="editableDataClass" data-edit="22" data-table="production">back and front board 2 side</td> <td class="editableDataClass" data-edit="22" data-table="shipping">Call before installing</td> <td class="editableDataClass" data-edit="22" data-table="install">he needs to get installed on 17th - Jan-2018</td> <td class="editableDataClass" data-edit="22" data-table="production_manager">Saif</td> <td class="editableDataClass" data-edit="22" data-table="project_manager">Hemanth</td> <td class="editableDataClass" data-edit="22" data-table="sales_representative"></td> <td class="editableDataClass" data-edit="22" data-table="shipping_method">mini truck</td> <td data-table="workflow" style="color:#0277bd">16-01-2018</td> <td class="statusNotClass"> <select data-edit="22" data-table="status" class="defineWorkflow"> <option value="">-- Select --</option> <option value="progress">Progress</option> <option value="pending">Pending</option> <option value="completed">Completed</option> </select> </td> <td> </td></tr></tbody><thead id="alsoDeleteThead22" class="thead-dark excludeAction" style="background-color: !important;"> <tr><th style="width: 100% !important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Edit Option</th> <th colspan="50 "> <a> <form action="http://localhost:8000/send_customer_status" method="POST"> <input type="hidden" name="_token" value="DbhEfiBiILxfL7GeRivtIsVw2U1VAyxcWAqw3WaN"> <input type="hidden" name="job_id" value="22"> <input type="hidden" name="customer_id" value="12"> <button class="btn btn-danger send-status statusAlreadySent" title="Status Sent On - 2018-01-16 17:28:00">Send Status </button> </form></a> <a href="#" class="btn btn-danger send-quotation">Send Quotation</a> <a href="#" class="btn btn-danger send-invoice">Send in Voice</a> <a href="#" class="btn btn-danger delete-customer" data-delete="22">Delete</a></th> </tr></thead> <tfoot> <tr> <th>Id</th> <th>Customer Name</th> <th>Description</th> <th>Order Number</th> <th>PO Number</th> <th>Quantity</th> <th>Due Date</th> <th>Billing Address</th> <th>Shipping Address</th> <th>Installing Address</th> <th>Design</th> <th>Production</th> <th>Shipping</th> <th>Install</th> <th>Production Manager</th> <th>Project manager</th> <th>Sales Representatives</th> <th>Shipping Method</th> <th>Created At</th> <th>Status</th> <td style="display:none;"></td> </tr> </tfoot> </table> 

please help me thanks in advance!!

Answer 1

I would say that you should make use of rowspan and colspan here to do the presentation of your table (and so use two <tr> for on line) this sould help you by not using several <tbody> in your table (in fact you must not use more than one <tbody></tbody> inside a table), alsor a proper table sould be like the following :

 <table>
   <thead>
     <tr>
       <th>Header column A<th>
       <th>Header column B<th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Content column A Row 1<td>
       <td>Content column B Row 1<td>
     </tr>
   </tbody>
   <tfoot>
   </tfoot>
 </table>