Cacher les éléments de la liste avec un “plus” bouton

J'ai un problème. Je suis l'obtention de données à partir d'une base de données MySQL, et de faire une liste. C'est tout bon, et fonctionne très bien, mais la liste est maintenant plus de 100 articles de long si je n'ai pas de limite.
J'ai essayé de Googler la façon de raccourcir la liste, et a trouvé quelques choses avec jQuery et JavaScript, mais cela ne fonctionne pas trop bien.

Ce que je suis à la recherche d'un moyen de faire la liste se limite à 10 points, avec un [Plus] bouton en dessous. Quand la touche est pressée, les 10 prochaines éléments montrer, et lorsque vous appuyez de nouveau, les 10 plus etc.

J'ai ma liste normale <li> et <ul> bits.
Si il y a besoin de plus d'information, veuillez me le demander. Ceci est la page web, il est à propos de: http://lolmewn.nl/stats/

Un peu de mon code PHP:

echo "<li><a href=\"?player=" . $row['player'] . "\">" . $row['player'] . 
     "</a></li>\n";

Qu'avez-vous essayé? Vous devez indiquer au moins votre code HTML dans votre question. Aussi, vous pouvez diviser votre grand liste dans de multiples <ul>s, chacun avec 10 <li>. Cela devrait rendre les choses plus faciles.
Merci de Regarder ce stackoverflow.com/questions/4054211/...
Felix Christy merci pour votre commentaire. Cependant, ce n'est pas seulement de montrer les 3 premiers, puis l'étendre à tout?

OriginalL'auteur Lolmewn | 2012-06-08

2

Une méthode consiste à utiliser ajax pour charger les éléments de la liste & limiter à 10 éléments à l'aide de mysql limite.

Sinon, si vous chargez tout à la fois, vous pouvez effectuer les opérations suivantes: (écrire le code vous-même)
- Tous les charger dans un ul et de rendre l'affichage de toutes les aucun.
- Puis à l'aide de jquery eq sélecteur afficher les 10 premiers li éléments.
- en cliquant sur plus, il suffit de basculer li laquelle vous souhaitez afficher.
Cela vous semble intéressant, je vais lui donner un aller.

OriginalL'auteur gopi1410
1

Avez-vous déjà essayer jquery datatables encore?

Tout d'abord, merci pour votre réponse. Je l'ai vu, et il a obtenu recommandé de trop. Cependant, je suis complètement familier avec JQuery/Javascript. Je vais vous donner un autre aller, mais je ne sais pas si ça va marcher cette fois.
+1 pour le lien sympa.:) ne savait pas encore!
c'est un peu facile. Je pense que vous pouvez lire la documentation et un certain degré de personnalisation avec trop peu de javascript/jquery. Et vous pouvez remplacer les tables données par votre code php pour récupérer à partir de la base de données.

OriginalL'auteur Tepken Vannkorn

Solution Simple en pur javascript:

var ul = document.getElementsByTagName("ul")[0], //Your <ul>
    readmore = document.createElement("li"),
    lisColl = ul.getElementsByTagName("li"),
    len = lisColl.length,
    lis = [],
    pos = 0;
readmore.textContent = "Read more";
for (var i = 0; i < len; i++) {
    lisColl[i].style.display = "none";
    lis.push(lisColl[i]);
}
readmore.onclick = function () {
    if (this.parentNode) {
        this.parentNode.removeChild(this);
    }
    for (var c = 0; pos < len; pos++) {
        if ((c++) === 10) {
            ul.insertBefore(this, lis[pos + 1]);
            break;
        }
        lis[pos].style.display = "";
    }
}
readmore.onclick.call(readmore);

Salut, je vous remercie pour votre réponse. J'ai ajouté le code de la page web, mais rien ne semble être en train de changer. C'est peut-être juste moi, à défaut au Javascript, mais je n'en suis pas sûr.
Je l'ai testé sur Firefox, donc ça devrait marcher. Est-il de jeter quelque erreur?
Non, il n'a tout simplement pas de cacher quoi que ce soit. Je l'ai ajouté à la page web qui peut être trouvé ici: lolmewn.nl/stats

OriginalL'auteur mck89

Si vous voulez, c'est un pur javascript, j'ai fait un exemple sur jsfiddle

Javascript

function showMore() {

    var listData = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.shown)')).slice(0, 3);

  for (var i=0; i < listData.length; i++)
  {
    listData[i].className  = 'shown';
  }
  switchButtons();
}

function showLess() {
    var listData = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.hidden)')).slice(-3);
  for (var i=0; i < listData.length; i++)
  {
    listData[i].className  = 'hidden';
  }
  switchButtons();
}

function switchButtons() {
    var hiddenElements = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.shown)'));
  if(hiddenElements.length == 0)
  {
    document.getElementById('moreButton').style.display = 'none';
  }
  else
  {
    document.getElementById('moreButton').style.display = 'block';
  }

  var shownElements = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.hidden)'));
  if(shownElements.length == 0)
  {
    document.getElementById('lessButton').style.display = 'none';
  }
  else
  {
    document.getElementById('lessButton').style.display = 'block';
  }
}

onload= function(){
    showMore();
}

HTML

<ul id="dataList">
    <li class="hidden">One</li>
    <li class="hidden">Two</li>
    <li class="hidden">Three</li>
    <li class="hidden">Four</li>
    <li class="hidden">Five</li>
    <li class="hidden">Six</li>
    <li class="hidden">Seven</li>
    <li class="hidden">Eight</li>
    <li class="hidden">Nine</li>
    <li class="hidden">Ten</li>
    <li class="hidden">Eleven</li>
</ul>
<input id="moreButton" type="button" value="More" onclick="showMore()"/>
<input id="lessButton" type="button" value="Less" onclick="showLess()"/>

CSS

.shown{
  display:block;
}
.hidden{
  display:none;
}

OriginalL'auteur masi

0

Si vous souhaitez limiter le nombre de résultats à partir de la base de données, ajouter LIMIT 10 (ou n'importe quel nombre) à la requête MySQL.

Si vous souhaitez masquer les listes, mais de les laisser disponibles, vous aurez besoin de CSS pour masquer à eux, et Javascript/Jquery pour afficher. (CSS3 peuvent vous permettre d'afficher sans Javascript/Jquery, mais il n'est pas totalement pris en charge encore partout).

En supposant que tous les éléments de la liste ont la même CSS class puis une boucle javascript semblable à la suivante peut travailler:
```
function unhide(number) {
    var items = document.getElementsByClassName('tagnamehere');
    var shown=0;
    for (var i=0; shown<number && i<items.length; i++) {
        if (items[i].style.display=="" || items[i].style.display=="none") {
            items[i].style.display="list-item";
    shown+=1;
        }
    }
}
```
Dans le CSS, tout ce que vous devez ajouter est .tagnamehere {display:none;}

N'hésitez pas à remplacer avec vos propres balises.

OriginalL'auteur Scott Stevens

Vous devez vous connecter pour publier un commentaire.