Nascondere gli elementi di elenco con una “mostra altro”

Ho un problema. Io sono sempre dati da un database MySQL, e fare una lista. Questo è tutto bene e funziona bene, ma l’elenco è ora più di 100 oggetti lungo se non ho limite.
Ho provato Googling come accorciare una lista, e ho trovato alcune cose con jQuery e JavaScript, ma che non ha funzionato troppo bene.

Quello che sto cercando è un modo per rendere l’elenco si limita a 10 elementi, con un [di Più] pulsante sotto di esso. Quando viene premuto, il prossimo 10 articoli show, e quando viene premuto di nuovo, 10 in più etc.

Ho la mia lista in normale <li> e <ul> bit.
Se vi è la necessità di maggiori informazioni, si prega di chiedere a me. Questa è la pagina web del http://lolmewn.nl/stats/

Un po ‘ del mio codice PHP:

echo "<li><a href=\"?player=" . $row['player'] . "\">" . $row['player'] . 
     "</a></li>\n";
che Cosa hai provato? Si dovrebbe mostrare almeno il codice HTML nella tua domanda. Inoltre, è possibile dividere il vostro elenco di grandi dimensioni in più <ul>s, ciascuno con 10 <li>. Questo dovrebbe rendere molto più facile.
Si prega di Guardare a questo stackoverflow.com/questions/4054211/…
Felix Christy grazie per il tuo commento. Tuttavia, non solo i primi 3, per poi espandersi in tutto?

OriginaleL’autore Lolmewn | 2012-06-08

5 Replies
  1. 2

    Un metodo è quello di utilizzare ajax per caricare l’elenco di articoli & limitare a 10 elementi utilizzando mysql limite.

    Altrimenti, se si carica tutto in una volta, è possibile effettuare le seguenti operazioni: (scrivere il codice da soli)

    • Carico di tutti loro in una ul e rendere la visualizzazione di tutti e nessuno.

    • Quindi utilizzando jquery selettore eq visualizzare i primi 10 li elementi.

    • facendo clic su di più, è sufficiente attivare quelle li che si desidera visualizzare.

    Questo sembra interessante, vorrei dare un andare.

    OriginaleL’autore gopi1410

  2. 1

    Avete mai provato jquery datatable ancora?

    Prima di tutto, grazie per la tua risposta. L’ho visto, e l’ho consigliato anche. Tuttavia, io sono completamente familiarità con JQuery/Javascript. Cercherò di dare un altro andare, ma non sono sicuro se funzionerà questa volta.
    +1 per il bel link.:) non sapeva ancora!
    e ‘un po’ facile. Penso che si può leggere la documentazione e un po ‘ di personalizzazione con troppo pochi javascript/jquery codice. E si possono sostituire i dati della tabella da codice php per recuperare dal database.

    OriginaleL’autore Tepken Vannkorn

  3. 1

    Soluzione semplice in puro 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);
    Ciao, grazie per la tua risposta. Ho aggiunto il codice per la pagina web, ma nulla sembra cambiare. Potrebbe essere solo me che non riesco a Javascript, ma non ne sono sicuro.
    Io l’ho testato su Firefox, quindi dovrebbe funzionare. Non gettare qualche errore?
    No, no, non nascondere nulla. Ho aggiunto alla pagina web che può essere trovato qui: lolmewn.nl/stats

    OriginaleL’autore mck89

  4. 1

    Se si desidera che questo è puro javascript ho fatto un esempio su 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;
    }

    OriginaleL’autore masi

  5. 0

    Se si desidera limitare il numero di risultati dal database, aggiungere LIMIT 10 (o qualsiasi altro numero) di MySQL query.

    Se si desidera nascondere le liste, ma lasciare a loro disposizione, avrete bisogno di CSS per nascondere inizialmente li, e Javascript/Jquery per mostrare loro. (CSS3 potrebbero far scoprire loro senza l’uso di Javascript/Jquery, ma non è pienamente supportato ancora ovunque).

    Assumendo che tutti gli elementi dell’elenco stesso CSS class quindi un javascript loop come il seguente può funzionare:

    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;
            }
        }
    }

    Nel CSS, tutto quello che dovete aggiungere è .tagnamehere {display:none;}

    Sentitevi liberi di sostituire con il proprio tag.

    OriginaleL’autore Scott Stevens

Lascia un commento