Comment ajouter une barre de défilement pour mon tableau dynamique?

Si je définis une table vide dans mon index.html:

<body>
<table width="800" border="0"  class="my-table">
     <tr>
     </tr>

</table>

</body>

Puis-je ajouter de lignes et de colonnes à ma table par invoquer le code javascript suivant:

var myTable = $('.my-table');

var myArr=GET_FROM_SERVER //server returns an arry of object, myArr.length>50

for(var i=0; i<myArr.length)
myTable.append("<tr id="+i+">"
                      +" <td>"+myArr[i].name+"</td>"
                      +"<td>"+myArr[i].address+"</td>"                  
           +"</tr>");

myArr est un tableau d'obtenir à partir du serveur, la longueur de ce tableau pourrait être de plus de 50.

Je me suis tout de ce travail avec succès, ma question est, comment puis-je ajouter de la barre de défilement
ce tableau de sorte que si il y a trop de lignes, l'utilisateur peut utiliser la barre de défilement pour vérifier le contenu de la table.

OriginalL'auteur Leem | 2011-06-14

  1. 14

    Je tourne la table avec un div

    <body> 

 <div style="overflow:scroll;height:80px;width:100%;overflow:auto">

    <table width="800" border="0"  class="my-table">
    <tr>      </tr>  
    </table>  

 </div>

</body>
    L'approche que vous avez suggéré fonctionne très bien dans Firefox, mais sous IE c'est de donner quand il y a une seule ligne retournée par la requête de rapport. À ce moment, seuls les en-têtes sont se montrés dans la page HTML et l'utilisateur ont inutilement de défilement vers le bas pour voir l'enregistrement d'UN.
    utilisez <div style="overflow:scroll;height:100px;width:100%;overflow:auto">

    OriginalL'auteur Wicked Coder

  2. 3

    La facilité et la rapidité de réponse est le CSS overflow:scroll; sur l'élément parent.

    Toutefois, si vous essayez pour égayer vos tables, je vous conseille d'aller une étape plus loin et utiliser un plugin JQuery comme Table Fixe En-Tête.

    La bonne chose à ce sujet est que vous pouvez faire défiler la table corps tout en gardant la tête en place, ce qui le rend beaucoup plus facile à lire quand vous avez de grandes quantités de données.

    Vous pouvez également un script qui permet aux utilisateurs de cliquer dans l'en-tête et de trier le tableau par colonnes différentes. Dans ce cas, FlexiGrid pourrait être une option encore meilleure.

    OriginalL'auteur Spudley

  3. 1

    À partir d'un point de vue de l'INTERFACE utilisateur, ça va être plus facile d'interagir avec une longue table si c'est paginée, pas de défilement. Le défilement peut causer un certain nombre de comportements qui font qu'il est difficile pour les personnes handicapées à interagir. Il est facile de cliquer sur un côté de la page de lien, pas toujours facile de les faire défiler.

    Je m'attaque à la table de problèmes à l'aide d'une grille, et ma grille de choix est DataTables. Il vous donne la pagination, le filtrage, le tri, le tri et ajax chargement de contenu avec la possibilité de faire défiler avec un en-tête fixe si vous êtes déterminé à aller dans cette voie. Vous pouvez même configurer un téléchargement excel, pdf, imprimante, etc et de style à la volée avec juste un couple d'ajouts. Tout peut être paramétré avec quelques simples lignes de code. De loin, c'est le meilleur, le plus rapide astuce que j'utilise pour faire des complexes rapidement les données à la disposition de mes utilisateurs.

    OriginalL'auteur bpeterson76