Paginate отображает записи в реагирующих - PullRequest
Новая
       4

Paginate отображает записи в реагирующих

0 голосов
/ 07 ноября 2019

У меня есть следующее, 

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Pagination from "rc-pagination";
import Moment from "react-moment";
import swal from "sweetalert";
import axios from "axios";

import "rc-pagination/assets/index.css";
import AuthService from "../Auth/AuthService";
const Auth = new AuthService();

class JournalIndex extends Component {
  constructor() {
    super();
    this.state = {
      journals: []
    };
  }

  componentDidMount() {
    axios
      .get("/api/journals")
      .then(res => {
        this.setState({ journals: res.data });
      })
      .catch(error => {
        console.error(error);
      });
  }

  delete(id) {
    let config = {
      headers: { Authorization: "bearer " + Auth.getToken() }
    };

    swal({
      title: "Are you sure?",
      text: "Once deleted, you will not be able to recover this journal!",
      icon: "warning",
      buttons: true,
      dangerMode: true
    }).then(willDelete => {
      if (willDelete) {
        axios.delete("/api/journals/" + id, config).then(result => {
          this.props.history.push("/journals");
        });
        swal("Poof! Your journal has been deleted!", {
          icon: "success"
        });
      } else {
        swal("Your journal is safe!");
      }
    });
  }

  render() {
    return (
      <>
        <div className='p-12 text-gray-800'>
          <section className='text-center mb-12'>
            <h1 className='title'>Journals</h1>
            <p className='text-sm'>
              Here you'll find my journals, writings about everything from
              watches, repairs to dealing
            </p>
          </section>

          <section className='max-w-3xl m-auto'>
            {this.state.journals.map(journal => (
              <article className='pb-4' key={journal._id}>
                <Link
                  className='title dynamic-title'
                  to={`/journals/${journal._id}`}
                >
                  {journal.title}
                </Link>

                <div className='text-sm mt-2 mb-4'>
                  <Moment
                    format='Do MMMM YYYY'
                    date={new Date(journal.createdAt)}
                  />
                </div>

                {Auth.loggedIn() && (
                  <div className='mt-8 mx-auto text-center w-full'>
                    <hr />
                    <div className='my-4'>
                      <Link
                        to={`/dashboard/journals/${journal._id}/edit`}
                        className='btn btn-edit'
                      >
                        Edit
                      </Link>
                      <span className='text-gray-200 mx-4'>|</span>
                      <button
                        onClick={this.delete.bind(this, journal._id)}
                        className='btn btn-delete'
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                )}
                <hr />
              </article>
            ))}

            <Pagination
              showTotal={range => `${this.state.journals.length} items`}
              total={`${this.state.journals.length}`}
            />
          </section>
        </div>
      </>
    );
  }
}

export default JournalIndex;

Я использую пакет rc-pagination, но я ищу разбиение на страницы всех записей в сопоставленном массиве, чтобы он отображал только 10 элементов на странице.

Я просмотрел документы, но не совсем уверен, как его реализовать.

Или, если кто-нибудь может указать мне на пакет нумерации страниц и привести пример, который был бы великолепен, как яищу пагинацию на нескольких страницах.

Любая помощь будет отличной.

1 Ответ

0 голосов
/ 07 ноября 2019

rc-pagination имеет defaultPageSize проп, который вы можете определить как 10 или как угодно, как размер страницы.

...