Estoy experimentando con jQuery, JSON, etc. y encontré la siguiente tarea. Tengo un script de carga en el servidor que devuelve datos de tabla en formato JSON. Cuando recibí los datos JSON, quiero llenar mi tabla con ellos. Actualmente estoy usando un código similar al siguiente (hay más columnas y un procesamiento más avanzado, pero entendiste la idea):
... for (var key=0, size=data.length; key<size;key++) { $('<tr>') .append( $('<td>').html( data[key][0] ) ) .append( $('<td>').addClass('whatever1').html( data[key][1] ) ) .append( $('<td>').addClass('whatever2').html( data[key][2] ) ) .appendTo('#dataTable'); } ... <table id="#dataTable"></table> ...Esto funciona bastante bien. Pero una vez que los datos crecen, se vuelven terriblemente lentos. Para unos pocos cientos de registros, toma alrededor de 5 segundos (Firefox, IE) para construir la tabla y eso es un poco lento. Si, por ejemplo, creo todo el HTML en el servidor y lo envío como una cadena que incluyo en la tabla, será bastante rápido.
Entonces, ¿hay una forma más rápida de llenar la mesa?
NOTA: Sé lo que es la paginación y lo usaré al final, así que no digas "¿Para qué necesitas una tabla tan grande en tu página?". Esta pregunta es sobre cómo llenar la tabla rápidamente sin importar cuántos registros muestre :)
Vea mi respuesta a una consulta similar anterior usando matrices y "unirse".
No use jQuery en absoluto hasta el final, cuando lo llame solo una vez. Además, elimine la concatenación de cadenas también almacenando las cadenas en una matriz y usando el método "unir" para construir la cadena de una sola vez.
p.ej
var r = new Array(), j = -1; for (var key=0, size=data.length; key<size; key++){ r[++j] ='<tr><td>'; r[++j] = data[key][0]; r[++j] = '</td><td class="whatever1">'; r[++j] = data[key][1]; r[++j] = '</td><td class="whatever2">'; r[++j] = data[key][2]; r[++j] = '</td></tr>'; } $('#dataTable').html(r.join(''));Intente diferir la adición de la tabla al DOM en ejecución hasta lo más tarde posible.
var table = $('<table>'); // create a new table // populate the rows .... .append(table); // replace the existing table all in one go $('#dataTable').replaceWith(table);Esto debería evitar cualquier diseño de página hasta que toda la tabla esté lista.
Si el rendimiento es un problema real, también evitaría llamar a métodos que requieran analizar cadenas, como todas esas llamadas $('<td>') . Para un solo elemento, la sobrecarga de eso es probablemente bastante costosa (aunque vale la pena si tiene una larga cadena de HTML).
Según tengo entendido, se supone que agregar grandes cadenas de etiquetas usando .append() o .html() es bastante eficiente. Lo que pierde es el control que tendría si hubiera usado .text() para llenar las celdas de la tabla para evitar la inyección de código HTML.
Probablemente sea más rápido crear el HTML para toda la fila y agregar la fila a la tabla en lugar de agregar cada elemento individual de uno en uno. También puede extender eso para construir todo el HTML en una cadena y luego agregarlo todo de una vez, lo que sería aún más rápido. En un entorno MVC, probablemente devolvería una vista parcial (HTML) que tiene la tabla, ya que eso mantendría la separación de preocupaciones. Sin embargo, evitaría compilar HTML en el servidor (en un controlador), ya que eso significaría que tendría que cambiar el código cada vez que quisiera cambiar la forma en que se muestra la tabla. Si usa PHP u otro lenguaje de secuencias de comandos, filtre según corresponda para su entorno.
var html = ''; for (var key=0, size=data.length; key<size;key++) { html += '<tr><td>' + data[key][0] + '</td><td class="whatever1">' + data[key][1] + '</td><td class="whatever2">' + data[key][2] + '</td></tr>'; } $('#dataTable').append(html);