javascript - 为什么 dataTable 搜索仅适用于表的第一行

Question

我有一个dataTable，其搜索仅在表的第一行上进行。

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

为了更清楚地了解，请参阅此jsFiddle:https://jsfiddle.net/pkxmnh2a/30/

片段:

$(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>

请帮助我提前致谢!!

Answer 1

我想说你应该使用rowspan和colspan在这里演示您的表格(因此使用两个 <tr> 进行在线)这将有助于您不使用多个 <tbody>在您的表格中(事实上，您不得在表格内使用多个一个<tbody></tbody>)，或者一个正确的表格应如下所示:

 <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>