¿Cómo puedo hacer que la tabla sea capaz de ordenar con Twitter Bootstrap?

Question

Quiero saber cómo puedo hacer que mi tabla sea capaz de ordenar con Twitter Bootstrap? ¿Cuáles son las cosas que se deben considerar?

Answer 1

Debe usar jQuery y dataTable.js.

deja ver un ejemplo: rejilla

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example"> 

Display: para definir el diseño de la red para los elementos de control DataTables, elementos previamente habíamos usado "span8" para denotar elementos de la anchura media, pero con el cambio a 12 columnas en Bootstrap solo tenemos que cambiar a usar "span6". Por lo que nuestra tablas de datos de inicialización se ve así:

$(document).ready(function() { 
    $('#example').dataTable({ 
     "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>" 
    }); 
}); 

También tenemos que establecer una nueva clase en las tablas de datos de envoltura elemento con el fin de hacer que los elementos de formulario aparecen en línea en lugar de como un bloque (la tabla de filtrado de entrada y selector de longitud son . efectuada por este para ello tenemos una simple extensión de la opción class "sWrapper" para el DataTable:

$.extend($.fn.dataTableExt.oStdClasses, { 
    "sWrapper": "dataTables_wrapper form-inline" 
}); 

clasificación Bootstrap v2 ha abandonado el soporte para TableSorter como una biblioteca de mesa y como resultado se han eliminado las clases de clasificación . Como tal, tenemos que definir nuestro propio estilo de clasificación, que podemos hacer exactamente en el forma de llama como lo hacemos en los propios archivos CSS DataTables' (las imágenes están disponibles en el archivo zip distribución de tablas de datos en los medios de comunicación/imágenes):

table.table thead .sorting, 
table.table thead .sorting_asc, 
table.table thead .sorting_desc, 
table.table thead .sorting_asc_disabled, 
table.table thead .sorting_desc_disabled { 
    cursor: pointer; 
    *cursor: hand; 
} 

table.table thead .sorting { background: url('images/sort_both.png') no-repeat center right; } 
table.table thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; } 
table.table thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; } 

table.table thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; } 
table.table thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; } 

Poner en orden Finalmente hay dos modificaciones en mi CSS integración del 1.4 archivo para completar nuestro estilo:

Elimine el ancho de las clases dataTables_length y dataTables_filter. Las actualizaciones en Bootstrap significan que ya no se necesitan. La clase de tabla que tenía antes tenía "margin: 1em 0"; pero con los cambios, el flujo visual ahora es mejor con "margin-bottom: 6px! important;"

Comprobar this referencia

Answer 2

Hay una library que proporciona la capacidad de clasificar con mesas de arranque.

Aquí hay un quick demonstration de cómo usarlo.

HTML:

<table class="table table-bordered table-striped sortable"> 
    <thead> 
     <tr> 
     <th data-defaultsign="month" data-sortcolumn="1" data-sortkey="1-1"> 
     Date 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td data-dateformat="D-M-YYYY">16.4.2004</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">6.7.2002</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">4.4.2004</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">6.6.2012</td> 
    </tr> 
    </tbody> 
</table> 

JS:

(function() { 
    var $table = $('table'); 
    $table.on('sorted', function() { 
     console.log("Table was sorted."); 
    }); 
}()); 

HTH.