Je travaille sur la création de la table HTML dynamique des données JSON, j'ai déjà créé la table de manière dynamique mais je dois maintenant le modifier avec une nouvelle exigence
Je veux montrer que 5 lignes en une seule fois puis rechargez la DIV et rendez les cinq rangées suivantes dans la même plongée et ainsi de suite jusqu'à ce que toutes les données soient rendues P> Li>
J'ai actuellement 68 données totales, donc je le remplissais comme 17 rangées de 4 colonnes p> li>
maintenant sur une fois lorsque la page LODES, je veux afficher 5 lignes, puis après en termes simples, je veux diviser mes données JSON en une partie de 5 à 5 lignes et afficher seulement 5 lignes à la fois à la fois à la fois ci-dessous après Attribuez la table en quatre colonnes que j'ai déjà fait, maintenant je veux simplement afficher seulement cinq rangées à la fois P> LI>
Je manque d'idée ou d'approche comment faire cela, comment puis-je diviser mon JSON dans cinq cinq rangs et leur montrer à chaque intervalle de temps de 5 secondes p> l> l> l>
ul> ce que j'ai fait strong> p> p>
5 secondes Code> Suivant 5 lignes dans la même Div P> LI>
5 secondes P> P> P> P> P> P> P> P> P >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="DisplayTable">
</div>
3 Réponses :
Au lieu de créer les lignes après toutes les 5 secondes, vous pouvez créer les lignes en une fois et les cacher tout en utilisant une classe .Chidifié code>. Ensuite, toutes les 5 secondes rendent les 5 premières lignes cachées visibles. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="DisplayTable">
</div>
Créez une table HTML vide avec 4 lignes et donnez une carte d'identité unique à chaque champ "Field0", "Field1" ...
que vous pouvez faire fonction pour peupler ces champs après une heure précise. À la fin, cela ressemblerait à ceci: P>
var data = [
{
name: "test data 0"
},
{
name: "test data 1"
}
]; //Your data
var currentField = 0; //Current offset for the field
$(function() { //When document loads
showNext(); //Populate first 4 fields
setInterval(showNext, 4000); //Set up "timer" to populate new ones on every 4 seconds
});
function showNext(){
for(let i = 0; i < 4; i++){
$("#column" + i + " #field0").text = data[i + currentField].name;
$("#column" + i + " #field1").text = data[i + currentField].price;
currentField++;
}
}
Je n'ai pas reçu de vous pouvez faire un code de travail avec mon code existant
Point est de vous donner une idée de la façon de résoudre le problème, de ne pas vous écrire une solution complète.
yup, mais je n'ai eu aucune idée de ça
L'idée est de déjà avoir une table HTML dans laquelle vous allez simplement échanger des valeurs, créez une nouvelle table chaque fois que vous souhaitez échanger des valeurs.
Vous pouvez utiliser Array .pototype.slice () code> pour extraire une partie du tableau et rendre cela dans HTML:
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <table class="table" id="DisplayTable"> </table>
Une seule colonne affiche, je l'ai fait pour 4 colonnes
Ces prix de vente sont alignés sur le nom que j'ai bien aligné dans mon code, j'ai essayé de modifier dans votre code mais vous êtes à l'aise à la fois en une seule fois.
Votre code de rendu de table est très complexe, c'est pourquoi je trouve difficile de faire des changements de mon côté
Yup, j'ai aussi eu ça, je voulais poser un doute sur où calculez-vous pour montrer 5 lignes dans mon code réel que je dois montrer différents notes de rangées,
@manishthakur: J'ai ajouté mes commentaires au code. Je ne compte pas réellement 5 rangées. Je casse 20 articles qui tombent sur chaque "page" en groupes de 4 articles chacun de sorte qu'il existe donc des groupes de formes naturellement formés 5 .
@manishthakur: Vous remarquerez peut-être que je ise itérer deux fois sur ces 20 articles cibles. Je l'ai fait délibérément d'avoir ce morceau de code (tableau de rupture en groupes de taille fixe) réutilisable.
Hey monsieur pouvez-vous s'il vous plaît m'aider ici ici Stackoverflow.com/Questtions/56521258/... avec une certaine approche