jQuery DataTables baştaki iki satır: ilk satır sütun adları ve sıralama, ikinci satır filtreleme

Question

datatables eski sürümlerinde (1.7'ye kadar.?), Iki satırlık bir sütun başlığı içeren bir tabloya sahip olabilirdim. sıralama üst sırada yapıldı ve sütun adı dahil edildi ve girişler ve filtrelerle filtreleme ikinci satırda yapıldı. (1.9.0) en son dahil üst sürümler ile

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

, bu sıralanabilir başlık ikinci satır yerine ilk satırında uygulanan oluyor çünkü artık çalışır. Bu çalışma, http://code.google.com/p/jquery-datatables-column-filter/ gibi ek bir eklentiye başvurmadan çalışmanın bir yolu var mı?

Answer 1

jQuery DataTables auther Allan Jardine bunu yapmak için basit bir yol belirtti: , sürüm 1.8'den beri kullanılabilen bSortCellsTop seçeneğini kullanın.

http://datatables.net/ref#bSortCellsTop

(http://datatables.net/ref) jQuery DataTable için

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

+1!

Answer 2

Daha iyi bir çözüm için bu konuda çok şey arar ve aşağıdaki kodu oluşturdum. Burada, tablo başlık hücrenizdeki karşılık gelen sınıf adlarını kullanarak açılan ve arama kutuları arasında seçim yapabilirsiniz. Sıralama düğmeleri ve sütun adları ilk sıradadır, filtreleme seçenekleri ikinci sıradadır.

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