jQuery DataTables 2行目：最初の行の列名とソート、2番目の行のフィルタリング

Question

datatablesの古いバージョンでは（以前は1.7？）、2行の列ヘッダーを持つテーブルを持つことができました。並べ替えは一番上の行で行われ、列名が含まれ、入力と選択によるフィルタリングが2番目の行で行われました。 （1.9.0）最新含むより高いバージョンで

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

ソートヘッダではなく、最初の行の第2行に適用なっているので、これはもはや機能しません。 http://code.google.com/p/jquery-datatables-column-filter/のような追加のプラグインに頼らなくても、この問題を解決する方法はありますか？

Answer 1

jQuery DataTablesの作成者Allan Jardineは、これを実現する簡単な方法を指摘しました。 バージョン1.8以降で利用可能なbSortCellsTopオプションを使用します。 jQueryのDataTableのため

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！

Answer 2

もっと良い解決策を探すためにこれについて多くを検索し、以下のコードを作成しました。ここでは、テーブルヘッダーセル内の対応するクラス名を使用して、コンボボックスと検索ボックスのどちらかを決定できます。並べ替えボタンと列名は最初の行にあり、フィルタリングオプションは2番目の行にあります。

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