jQuery DataTables hai hàng trong đầu: tên cột hàng đầu tiên và sắp xếp, lọc hàng thứ hai

Question

Trong phiên bản cũ hơn của datatables (lên đến 1.7.?), Tôi đã sử dụng để có thể có một bảng với tiêu đề cột hai hàng, trong đó phân loại được thực hiện ở hàng trên cùng, và bao gồm tên cột, và lọc với đầu vào và lựa chọn được thực hiện ở hàng thứ hai.

<table> 
    <thead> 
    <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
     <th>Col 3</th> 
    </tr> 
    <tr> 
     <td><input type="text" /></td> 
     <td><select><option ....></select></td> 
     <td><input type="text" /></td>   
    </tr> 
    </thead> 
    <tbody>... 

Với phiên bản cao hơn, bao gồm phiên bản mới nhất (1.9.0), điều này không còn hoạt động, vì tiêu đề sắp xếp được áp dụng cho hàng thứ hai thay vì hàng đầu tiên. Có cách nào để làm việc này mà không cần sử dụng một plugin bổ sung chẳng hạn như http://code.google.com/p/jquery-datatables-column-filter/?

Answer 1

Tự động điền dữ liệu jQuery Allan Jardine chỉ ra một cách đơn giản để thực hiện việc này: sử dụng tùy chọn bSortCellsTop, có sẵn kể từ phiên bản 1.8.

http://datatables.net/ref#bSortCellsTop

(http://datatables.net/ref)

http://datatables.net/forums/discussion/9046/two-rows-in-thead-first-row-for-sorting-second-row-for-column-filtering

+1 cho DataTables jQuery!

Answer 2

Tôi tìm kiếm rất nhiều về điều này để có giải pháp tốt hơn và tạo mã bên dưới. Ở đây bạn có thể quyết định giữa các hộp kết hợp và tìm kiếm bằng cách sử dụng tên lớp tương ứng trong các ô tiêu đề bảng của bạn. Các nút sắp xếp và tên cột nằm trong hàng đầu tiên, các tùy chọn lọc nằm ở hàng thứ hai.

<table id="example" width="100%"> 
    <thead> 
     <tr> 
      <th>Sıra</th> 
      <th>SKU</th> 
      <th>Stok Adı</th> 
      <th>Ana Kategori</th> 
      <th>Alt Kategori</th> 
      <th>Stok Adedi</th> 
      <th>Alt Limit</th> 
      <th>Son Giriş Tarihi</th> 
      <th>Son Giriş Adedi</th> 
      <th>Stok Yaşı</th> 
     </tr> 
     <tr class="filter"> 
      <th class="combo"></th> 
      <th class="combo"></th> 
      <th class="combo"></th> 
      <th class="search"></th> 
      <th class="search"></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>S49996</td> 
      <td>A4-Tech Q Klavye Siyah Ps2 (KM720)</td> 
      <td>Ofis Elektroniği</td> 
      <td>Klavye - Mouse</td> 
      <td>25</td> 
      <td>10</td> 
      <td>10-10-2015</td> 
      <td>78</td> 
      <td>89</td> 
     </tr> 
    </tbody> 
</table> 

<script type="text/javascript"> 
$(document).ready(function() { 

    var table = $('#example').DataTable({ 
    "bPaginate": false, 
    "bLengthChange": false, 
    "bFilter": true, 
    "bInfo": false, 
    "bAutoWidth": false, 
    "bSortCellsTop": true, 
     "scrollY": "300px", 
     "scrollCollapse": true, 
     initComplete: function() { 
      this.api().columns().every(function() { 
       var column = this; 
       var columnIndex = this.index(); 
       switch ($(".filter th:eq("+columnIndex+")").attr('class')) { 
            case 'combo': 
             var select = $('<select style="width:100%;"><option value=""></option></select>') 
              .appendTo($(".filter th:eq("+columnIndex+")").empty()) 
              .on('change', function() { 
               var val = $.fn.dataTable.util.escapeRegex(
                $(this).val() 
               ); 
               column 
                .search(val ? '^'+val+'$' : '', true, false) 
                .draw(); 
              }); 

             column.data().unique().sort().each(function (d, j) { 
              select.append('<option value="'+d+'">'+d+'</option>') 
             }); 
             break; 
            case 'search': 
             $(".filter th:eq("+columnIndex+")").html('<input type="text" />'); 

             $('input', $(".filter th:eq("+columnIndex+")")).on('keyup change', function() { 
              if (column.search() !== this.value) { 
               column 
                .search(this.value) 
                .draw(); 
              } 
             }); 
             break; 
       } 
      }); 
     }  
    }); 
}); 
</script>