javascript - recorrer - Problema de tablas de JQuery
tablas en javascript ejemplos (6)
Tengo un par de problemas con el plugin JQuery tablesorter . Si hace clic en un encabezado de columna, debe ordenar los datos por esta columna, pero hay un par de problemas:
- Las filas no están correctamente ordenadas (1, 1, 2183, 236)
- La fila total está incluida en el género
Con respecto a (2), no puedo mover fácilmente la fila total a un pie de tabla, porque el HTML es generado por la biblioteca de etiqueta displaytag sobre la cual tengo control limitado.
Con respecto a (1), no entiendo por qué el género no funciona, ya que he usado exactamente el mismo JavaScript que se muestra en el ejemplo más simple en los tutoriales de tablesorter .
De hecho, solo hay una línea de código JS, que es:
<body onload="jQuery(''#communityStats'').tablesorter();">
Gracias de antemano, Don
Los campos en blanco pueden ser un problema (p. Ej., No son 0), intente utilizar un analizador personalizado que elimine los valores no numéricos y fuerce los valores a enteros (ejemplo: http://paste.pocoo.org/show/90863/ )
Coloque su fila ''total'' dentro de una etiqueta <tfoot> </ tfoot> justo antes del final de la tabla
Creo que la respuesta al n. ° 1 es que tiene campos en blanco para algunas columnas numéricas que hacen que el clasificador de tablas detecte esa columna como una columna de "cadena".
El primer problema se debe al hecho de que el clasificador de tabla detecta automáticamente la columna a una columna ''texto'' (probablemente porque las celdas están vacías). Para resolver esto, use este código para inicializar el tablesorter y establecer todo el campo en cualquier dígito o moneda según los datos:
<script type="text/javascript" >
jQuery(document).ready(function()
{
jQuery("#communityStats").tablesorter({
headers: { 2: { sorter:''digit'' } ,
3: { sorter:''digit'' } ,
4: { sorter:''digit'' } ,
5: { sorter:''digit'' } ,
6: { sorter:''digit'' } ,
7: { sorter:''digit'' } ,
8: { sorter:''currency'' } ,
9: { sorter:''currency'' } ,
10: { sorter:''currency'' } ,
11: { sorter:''currency'' }
}
});
});
</script>
Descubrí que lo siguiente funcionará con columnas numéricas (dígitos) no reconocidas. Parece que 0 se considera texto por la versión actual (2.0.3) de tablesorter.
Incluyendo la muestra de tvanfosson, esta secuencia de comandos en la parte inferior de la página movería la última fila del pie de página, lo que evita que se clasifique con los datos dentro de tbody y obligaría al clasificador a utilizar una clasificación numérica en lugar de ordenar el texto. usando como lo describiste.
$(document).ready(function() {
$(''#communityStats'').append("<tfoot></tfoot>");
$(''#communityStats > tr:last'').remove()
.appendTo(''#communityStats > tfoot'');
$("#communityStats").tablesorter({
debug: true,
headers: {
0:{sorter: ''digit''}
...
10:{sorter: ''digit''}
}
});
});
Sugeriría usar algo de Javascript para eliminar la última fila de la tabla. Agregue un pie de página y luego vuelva a agregar la fila eliminada de la tabla. Para resolver el problema con datos vacíos en una celda numérica, es posible que deba agregar su propio analizador personalizado .
$(function() {
$(''#communityStats'').append("<tfoot></tfoot>");
$(''#communityStats > tr:last'').remove()
.appendTo(''#communityStats > tfoot'');
$(''#communityStats'').tablesorter();
});
encabezado fijo para plugin tablesorter:
css
table.tablesorter thead {
position: fixed;
top: 35px; //
}
JS
function tableFixedHeader() {
var tdUnit = $(''.tablesorter tbody tr:first'').children(''td'').length;
for(var i=0;i<tdUnit; i++) {
$(''.tablesorter thead th'').eq(i).width($(''.tablesorter tbody td'').eq(i).width());
}
$(''.tablesorter'').css(''margin-top'',$(''.tablesorter thead'').height());
}
HTML
<div id="container">
<div id="topmenu" style="height:35px;">some buttons</div>
<div id="tablelist" style="width:100%;overflow:auto;">
<table class="tablesorterw">.....</table>
</div>
</div>