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?¿Cómo puedo hacer que la tabla sea capaz de ordenar con Twitter Bootstrap?
Respuesta
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
dataTables ya no es gratis.La respuesta de @KindSyco es una forma gratuita de hacer lo mismo usando Bootstrap y es un complemento de Bootstrap, por lo que se integrará más fácilmente. – akousmata
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.
funcionó a la perfección y limpió ... –
@Kremena ¡Feliz de haber ayudado a alguien! – KindSyco
- 1. ¿Cómo puedo hacer que la animación modal de Twitter Bootstrap sea más rápida?
- 2. cómo hacer que el programa sea capaz de instalar
- 3. ¿Cómo hacer que Twitter Bootstrap funcione con prototype.js?
- 4. ¿Cómo puedo hacer que una tabla sea desplazable
- 5. Tooltips con Twitter Bootstrap
- 6. ¿Puedo usar tagit con twitter bootstrap?
- 7. Formateo de tabla anidada con simple_form, nested_form y twitter-bootstrap
- 8. Cómo hacer que la consola sea capaz de imprimir cualquiera de 65535 caracteres UNICODE
- 9. CakePHP con Bootstrap (desde Twitter)
- 10. Twitter Bootstrap formulario: haga que la columna de la etiqueta sea más amplia
- 11. Menú desplegable con Twitter Bootstrap
- 12. Ember.js con Twitter Bootstrap Modal
- 13. ¿Cómo hacer que mi diseño sea capaz de desplazarse hacia abajo?
- 14. CakePHP 2.0 con Twitter Bootstrap
- 15. Twitter Bootstrap con Primefaces (JSF)
- 16. Uso de eventos tap con Twitter Bootstrap
- 17. Twitter Bootstrap Modal - IsShown
- 18. Grilla construida con Twitter Bootstrap y Backbone.js
- 19. Twitter Bootstrap LESS con Node.js y Express
- 20. ¿cómo puedo personalizar Twitter bootstrap para que funcione con el lenguaje de derecha a izquierda?
- 21. Twitter Bootstrap FileUpload
- 22. ¿Cómo puedo cambiar cols de textarea en twitter-bootstrap?
- 23. Cómo extender el complemento Bootstrap de Twitter
- 24. ¿Puedo hacer que un TTreeNode sea invisible?
- 25. Twitter Bootstrap clase ".container": ¿cómo usarlo semánticamente?
- 26. Symfony2 y Twitter Bootstrap
- 27. Twitter Prácticas recomendadas de personalización de Bootstrap
- 28. Cómo hacer que la tarea sea deseable
- 29. Plone y Twitter Bootstrap
- 30. ¿Cómo hacer que la identificación amigable no sea sensible?
use table sorter plugin –
Ya uso este [plugin] (http://datatables.net/blog/Twitter_Bootstrap_2) Copié el css, js y etc. y no sé por qué no funciona ~ _ ~ –
check console por error presione f12 -> consola –