Jquery数据表排序图标不会显示在标题上

Question

如下图所示，如何在表格的标题行中显示排序图标而不是过滤器行？

我用jQuery数据表，它会自动添加这些排序图标在错误的位置。

Wrong position sort icons

这里是我的jQuery代码

let table = $('#datatable_users'); 

    let oTable = table.dataTable({ 
     "language": { 
      "aria": { 
       "sortAscending": ": activate to sort column ascending", 
       "sortDescending": ": activate to sort column descending" 
      }, 
      "emptyTable": "No data available in table", 
      "info": "Showing _START_ to _END_ of _TOTAL_ entries", 
      "infoEmpty": "No entries found", 
      "infoFiltered": "(filtered1 from _MAX_ total entries)", 
      "lengthMenu": "_MENU_ entries", 
      "search": "Search:", 
      "zeroRecords": "No matching records found" 
     }, 
     rowReorder: {}, 

     "order": [ 
      [0, 'asc'] 
     ], 

     "lengthMenu": [ 
      [5, 10, 15, 20, -1], 
      [5, 10, 15, 20, "All"] // change per page values here 
     ], 
     // set the initial value 
     "pageLength": 10, 
     "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable 
    }); 

这里是我的HTML代码

<table class="table table-striped table-bordered table-hover table-checkable" id="datatable_users"> 
<thead> 
<tr role="row" class="heading"> 
    <th width="5%"> ID</th> 
    <th> Name</th> 
    <th> Phone</th> 
    <th> Email</th> 
    <th> IsActive</th> 
    <th> Join</th> 
    <th> IsNew</th> 
    <th> Limit/Day</th> 
    <th> Booked</th> 
    <th width="5%"> #</th> 
</tr> 
<tr role="row" class="filter"> 
    <td><input type="text" class="form-control form-filter input-sm" name="id"/> 
    </td> 
    <td> #</td> 
    <td> 
     <input type="text" class="form-control form-filter input-sm" name="phone"/> 
    </td> 
    <td> 
     <input type="text" class="form-control form-filter input-sm" name="email"/> 
    </td> 
    <td> 
     <select name="isActive" class="form-control form-filter input-sm"> 
      <option value="">Select...</option> 
      <option value="pending">active</option> 
      <option value="closed">Blocked</option> 
     </select> 
    </td> 
    <td> 
     <div class="input-group date date-picker margin-bottom-5" 
      data-date-format="dd/mm/yyyy"> 
      <input type="text" class="form-control form-filter input-sm" readOnly 
        name="order_date_from" placeholder="From"/> 
      <span class="input-group-btn"> 
           <button class="btn btn-sm default" type="button"> 
            <i class="fa fa-calendar"></i> 
           </button> 
          </span> 
     </div> 
     <div class="input-group date date-picker" data-date-format="dd/mm/yyyy"> 
      <input type="text" class="form-control form-filter input-sm" readOnly 
        name="order_date_to" placeholder="To"/> 
      <span class="input-group-btn"> 
           <button class="btn btn-sm default" type="button"> 
            <i class="fa fa-calendar"></i> 
           </button> 
          </span> 
     </div> 
    </td> 
    <td> 
     <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"> 
      <input type="checkbox" class="group-checkable" 
        data-set="#sample_2 .checkboxes"/> 
      <span></span> 
     </label> 
    </td> 
    <td>#</td> 
    <td>#</td> 
    <td> 
     <div class="margin-bottom-5"> 
      <button 
       class="btn btn-sm green btn-outline filter-submit margin-bottom"> 
       <i class="fa fa-search"></i> Search 
      </button> 
     </div> 
     <button class="btn btn-sm red btn-outline filter-cancel"> 
      <i class="fa fa-times"></i> Reset 
     </button> 
    </td> 
</tr> 
</thead> 
<tbody> 
    .... 
</tbody> 

感谢。

Answer 1

是的，最后我发现了我错过的小配置。它是“orderCellsTop”。我只是把它设置为真，一切正常。