Rapide HTML Table de Tri?

Oui, je sais qu'il y a un beaucoup de JS/jQuery programmes pour ce faire. Je suis actuellement à l'aide http://www.kryogenix.org/code/browser/sorttable/sorttable.js . C'est très facile: il suffit d'un fichier JS, ajouter quelques attributs de classe à votre table, et vous êtes hors. En particulier, vous n'avez pas réellement besoin de savoir JS pour l'utiliser, et vous pouvez ajouter des clés de tri sans avoir besoin d'écrire votre propre JS pour le prolonger. Je l'aime beaucoup pour ces deux raisons. Le principal problème: ma table est ~9300 lignes de long, et le tri prend entre 10 et 20 secondes. Alors je me demandais, est-ce que d'autres scripts là plus vite que cela? Ce sont ceux que j'ai trouvé:

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html (Même pas sûr de ce que cela utilise)

http://tablesorter.com/docs/ (Vraiment vraiment sympa, mais pas facile à étendre, il est nécessaire de connaître JS/jQuery)
http://flexigrid.info/ (Overkill, j'ai juste besoin d'une table trieur, pas de manipulation de données de programme)

http://datatables.net/ (Overkill, nécessite Js/jQuery pour étendre)

Je suis sûr qu'il ya 5000 autres programmes qui peuvent faire ce que je veux, mais je n'ai pas le temps de comprendre et de toutes les tester pour voir si ils sont rapides. Donc j'aimerais savoir si quelqu'un là-bas sur StackOverflow me point à celui de la bibliothèque, ils savent être rapide, donc je n'ai qu'à trouver comment utiliser un seul programme.

(Btw, j'ai vu Java trier des centaines de milliers de nombre en millisecondes avec quicksort; personne ne sait ce que l'algorithme de JS.sort() utilise?)

vous tagged cette avec jquery, mais il semble que vous voulez éviter de prendre de la dépendance... où est-il?
Bien sûr, java pouvez trier nombre rapidement, mais vous êtes de tri de la DOM. DOM opérations sont lentes. Votre problème commence avec 9300 lignes dans une table HTML. Je ferais le tri côté serveur. Mais si vous ne voulez pas le faire, peut-être stocker les données dans un objet JS, de tri et de re-rendu de la table à chaque fois serait plus rapide.
Oui, je voudrais l'éviter, mais je vais prendre tout ce qui est rapide et apprendre JQuery, si c'était nécessaire.
- Je faire livrer le code HTML triés par une colonne, mais les données sont intéressantes, triés par de nombreuses colonnes. Le JS j'utilise actuellement lit le HTML, stocke les entrées dans un tableau, et ensuite utilise JS du builtin sort() sur le tableau.

OriginalL'auteur Dubslow | 2012-07-03

  1. 8

    J'ai eu beaucoup de succès avec les tables de données (un autre plugin jQuery) avec les mêmes numéros de ligne à de quoi vous parlez. La perte de vitesse que vous voyez avec du javascript sur ce que vous avez vu en java, il est en fait rendu un DOM, ce qui est beaucoup plus de travail. La beauté de DataTables est que vous avez la capacité de la source des données d'un tableau javascript (essentiellement json) - si le tri est effectué sur la matrice (vitesse similaire à java), et ensuite seulement la partie du tableau, l'utilisateur doit voir est généré dans le DOM.

    Voir ces adresses pour exemples:

    http://datatables.net/examples/data_sources/js_array.html

    ou

    http://datatables.net/examples/data_sources/ajax.html

    Je suggère l'utilisation de ce dernier. Si c'est toujours pas assez rapide statique à l'aide d'un tableau json, vous voulez construire un serverside script pour prendre la charge de javascript - excellent exemple avec serverside code ici:

    http://datatables.net/examples/data_sources/server_side.html

    Edit: Infini Défilement

    Tel que discuté dans les commentaires, le problème n'est pas le genre, mais plutôt de la conversion de la table HTML JS et à l'arrière. Cela peut aider en que le chargement de rendu des pièces de retour de sorte que l'utilisateur; le serveur fournit également la JS les mêmes informations que le tableau JSON forme. Ces deux techniques d'éliminer le HTML-JS de conversion et des problèmes de rendu, et donc d'augmenter considérablement la vitesse.

    HTML (c'est tout ce qui doit être affiché au début, avant de le JSON est le long - ajouter autant de th tags que vous avez des colonnes):

    <table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

    JQUERY:

    $(document).ready(function() {
    $('#table_id').dataTable( {
        "bScrollInfinite": true,
        "bScrollCollapse": true,
        "sScrollY": "200px",
        "bProcessing": true,
        "sAjaxSource": 'array.txt'
    });
});

    array.txt contient:

    { "aaData": [
    ["This will be in column 1","This in two","this in 3"],
    ["another row - column 1","another two","another 3"]
]}
    Donc, ce que vous dites, c'est que le tri n'est pas la partie la plus difficile, mais plutôt de tourner le 9300 lignes de HTML dans un tableau, c'est ce si long? C'est ce que le premier lien du préambule semble dire. Dans ce cas, ne serait-il pas plus facile pour moi de ne modifier que le simple JS j'ai déjà utiliser, afin de ne pas faire sa propre analyse? Edit: c'est ce Que Christian Varga a dire ainsi, n'est-ce pas?
    Le navigateur rendu le DOM de milliers de lignes avant même d'arriver à exécuter le code javascript est ce qui est si long - puis de conversion que pour un tableau va encore ralentir. Si vous fournissez les données dans un tableau, pour commencer, de les trier, puis seulement demander au navigateur de rendre les lignes dont vous avez besoin, vous devriez voir une grande augmentation de la vitesse.
    Ouais c'est en fait le navigateur de rendu qui est la plus longue, cochez cette jsFiddle: jsfiddle.net/wkndw. Sur ma machine les numéros sont générés, triés, et ajouté au dom en moins de 300ms (selon le profiler), mais il prend beaucoup plus de temps pour être réellement rendu - dans le domaine de secondes.
    Maintenant, je suis confus. Comme il est maintenant, pas de JS est en cours d'exécution, sauf si l'utilisateur clique sur un en-tête de table, mais la page se charge très bien (affichage de tous les 9200 lignes). Uniquement lorsqu'un utilisateur clique sur un en-tête, activer le JS, la page de ne pas répondre alors que le JS n'est sa chose. Edit: Tu veux dire que le rendu de ce que le JS trier produit est ce qui prend le temps? Le chargement de la page (et tous les 9229 lignes) prend < 3 secondes.
    Le problème est peut-être la méthode de votre choix plugin est en train d'utiliser pour rendre la table après le tri a été effectué. Cette méthode peut fonctionner mieux pour vous: datatables.net/release-datatables/examples/basic_init/... - qui rend les données de poste de tri peu à peu - Sinon, votre seule alternative est côté serveur.

    OriginalL'auteur Chris

  2. 0

    En dehors de bibliothèques, table de tri est assez facile à faire par vous-même.

    Le temps qu'il faut pour trier les lignes est négligeable par rapport au temps de DOM besoins pour déplacer les éléments autour.

    La seule chose qui VA vous donner les meilleurs résultats, est de détacher les lignes, les organiser en fonction de vos besoins et de les joindre à nouveau. Vous n'avez pas besoin brut de données JSON, simplement détacher l' $tr, de saisir les valeurs que vous souhaitez comparer de td, faire un tableau $tr, trier ce tableau selon la colonne que vous voulez et de les attacher en arrière à votre tbody.

    Par exemple, avec cette technique, je suis de tri de 3000 lignes de 15 colonnes en 1 seconde fois, ce qui est totalement viable. Avec cette performance, le seul problème est de savoir comment récupérer 3000 lignes pour le navigateur...

    OriginalL'auteur George Mavritsakis