jQuery DataTables dos filas en la cabecera: nombres de columnas de la primera fila y clasificación, filtrado de la segunda fila

Question

En versiones anteriores de datatables (hasta 1.7.?), Solía ​​tener una tabla con un encabezado de columna de dos filas, donde la ordenación se realizó en la fila superior e incluyó el nombre de la columna, y el filtrado con las entradas y selecciones se realizó en la segunda fila.

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

Con versiones superiores, incluyendo el más reciente (1.9.0), esto ya no funciona, porque el encabezado sortable se está aplicada a la segunda fila en lugar de la primera fila. ¿Hay alguna manera de hacerlo funcionar sin recurrir a un complemento adicional como http://code.google.com/p/jquery-datatables-column-filter/?

Answer 1

jQuery DataTables autor Allan Jardine señaló una manera simple de hacer esto: utilice la opción bSortCellsTop, disponible desde la versió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 para DataTables jQuery!

Answer 2

Busco mucho sobre esto para una mejor solución y creo el siguiente código. Aquí puede decidir entre los recuadros combinado y de búsqueda utilizando los nombres de clase correspondientes en las celdas de encabezado de su tabla. Los botones de clasificación y los nombres de columna están en la primera fila, las opciones de filtrado están en la segunda fila.

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