Reagieren Paginierung für Abschnitte

Ich benutze NodeJS mit React und ich habe ein Problem. Ich habe kein npm-Modul oder einen Code gefunden, mit dem ich eine Seitennumerierung für eine Ergebnisliste erstellen konnte.Reagieren Paginierung für Abschnitte

Ich habe eine Variable namens "Jobs", die eine Liste von Stellenanzeigen enthält. In meiner Render-Funktion Ich nenne:

{this.state.jobs.map(this.renderClass)}

, die jeden Job mit einer Funktion zuordnen.

Diese Funktion ist renderClass, dass der Putz enthält:

<section key={c.id} className="panel panel-featured-left panel-featured-primary"> 
      <Link to={'/job/'+c.id}> 
       <div className="panel-body"> 
        <div className="widget-summary"> 
         <div className="widget-summary-col widget-summary-col-icon"> 
          <div className="summary-icon"> 
           <img src={image} className="img-responsive" /> 
          </div> 
         </div> 
         <div className="widget-summary-col"> 
          <div className="summary"> 
           <h4 className="title">{c.company}</h4> 
           <div className="info"> 
            <strong className="amount"></strong><br/> 
            <p><i className="fa fa-map-marker"></i>&nbsp;{c.location}</p> 
            <p><i className="fa fa-suitcase"></i>&nbsp;{c.position}</p> 
           </div> 
          </div> 
          <div className="summary-footer"> 
           <a className="text-muted text-uppercase"><i className="fa fa-calendar"></i>&nbsp;{day}/{month}/{year}</a> 
          </div> 
         </div> 
        </div> 
       </div> 
      </Link> 
      </section>

Ich habe eine Paging eine riesige Liste von Jobs, aber ich würde auf diese Weise.

Wie kann ich das tun?

Dank

Quelle

2016-09-11 lucacatr

ich die Seite in einem Zustand speichern würde,

und tun so etwas (sagen wir jede Seite hat 10 Jobs) -

{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10) 
       .map(this.renderClass)}

Quelle

2016-09-11 16:53:56 naortor

Mmm, was ist this.state.page? Welchen Wert hat es? Auf diese Weise, werde ich eine Paginierung haben? – lucacatr

Ich gab Ihnen eine Vorstellung davon, wie Sie es implementieren, sagen Sie, dass Sie von Seite 0 beginnen - dann sollte der initialState Seite sein: 0, und dann entweder per Knopfdruck oder durch Scrollen sollten Sie den Status erhöhen.page – naortor

Wow! Gute Idee! Du löst mein Problem. Ich habe zwei Knöpfe gemacht, die jetzt zwischen verschiedenen Seiten wechseln. Es gibt nur ein Problem. Wenn die Ergebnisse beendet sind, ist die Inkrement-Schaltfläche immer aktiv. Wie kann ich es blockieren, wenn es keine anderen Ergebnisse gibt? – lucacatr

Ich schlage vor, um Ihren Bedarf ein bauen Komponente für die Handhabung der Paginierung. Etwas wie das:

<Pagiantion 
listLenght = {111} 
selectedPage = {1} 
itemPerPage = {10} 
.... 
/>

Ich fand die beste Komponente, die es behandelt, . Erlaubt Ihnen alles benutzerdefinierte (Zahlentasten, Wrap-Container, Verbreitung, ..). Sein Dokument ist gut, Demo ist auch klar.

Quelle

2017-08-30 10:48:50 hien

Reagieren Paginierung für Abschnitte

Antwort

Verwandte Themen