Я не мог установить, какие элементы будут отображаться на странице, на которой реагирует js pagination - PullRequest
Новая
       13

Я не мог установить, какие элементы будут отображаться на странице, на которой реагирует js pagination

0 голосов
/ 28 мая 2019

Я пытался сделать пагинацию, но этого не произошло.Наверное, я не мог понять, сколько страниц с данными json появится.

Ниже приведена ссылка на пример, который я пытался сделать.

Спасибо всем заинтересованным.

https://codesandbox.io/embed/kategori-detay-pagination-zpzdt

 handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({ activePage: pageNumber });
  }

 <Pagination
          prevPageText="prev"
          nextPageText="next"
          firstPageText="first"
          lastPageText="last"
          pageRangeDisplayed={10}
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={totalPosts}
          pageRangeDisplayed={10}
          onChange={this.handlePageChange}
        />

1 Ответ

2 голосов
/ 28 мая 2019

Вы не связали функцию handlePageChange () с правильным 'this' 

constructor(props) {
    super(props);
    this.state = {
      CategorySlug: "",
      CategoryBrief: [],
      Posts: []
    };

    // Need to bind the function to proper context
    this.handlePageChange = this.handlePageChange.bind(this);
}

handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);

    // Without binding, 'this' refers <Pagination /> instance
    // With binding, 'this' refers to current <PageCategoryDetail /> instance
    this.setState({ activePage: pageNumber });
}

Или, если вы предпочитаете, вы можете использовать более новый синтаксис, тогда вам не нужно связывать каждая функция индивидуально 

handlePageChange = (pageNumber) => {
    // Your code here
}

Редактировать

Чтобы отобразить элементы, в соответствии с выбранной страницей, вам нужно манипулировать массивом сообщений и отфильтровывать необходимые элементы 

// You only filter by the selected Category, did not handle the paging
{Posts.filter(b => b.CategoryName === CategorySlug).map(item => (
   <li key={item.PostID}>{item.Title}</li>
))}

// You need further handle the pagination
const POST_PER_PAGE = 5
const pageOffset = this.state.activePage > 0 ? this.state.activePage - 1 : 0;
const startIndex = pageOffset * POST_PER_PAGE;
const endIndex = startIndex + POST_PER_PAGE;
{Posts.filter(b => b.CategoryName === CategorySlug).slice(startIndex, endIndex).map(item => (
   <li key={item.PostID}>{item.Title}</li>
))}

https://codesandbox.io/s/kategori-detay-pagination-f72px

...