Живой поиск с нумерацией страниц в React. js - PullRequest
Новая
       40

Живой поиск с нумерацией страниц в React. js

0 голосов
/ 07 апреля 2020

Я хочу выполнить поиск на всех страницах, но мой код выполняет поиск только на текущей странице.
Например, я на странице 2/5, когда набираю имя туриста, который присутствует на этой странице. показывает мне данные
, но когда я набираю туриста, который находится на странице 4/5, он ничего мне не показывает.
Я использую Laravel в бэкэнде.
Вот код бэкенда: 

$tourists = Tourist::where('hotel_id', $request->hotel_id)->orderBy('created_at', 'DESC')->paginate(10);
return $toursits;

Код внешнего интерфейса: 

this.state = {
      activePage: 1,
      tourists: []
}
async componentDidMount() {
    await this.getTourists();
  }
async getTourists() {
    let response = await callApi('tourists/paginate', { page: this.state.activePage, hotel_id: this.context.hotel_id[0] });
    this.setState({ tourists: response.data, perPage: response.meta.per_page, total: response.meta.total, lastPage: response.meta.last_page });
  }

Метод визуализации: 

{this.state.tourists
            .filter(x => new RegExp (this.state.first_name, 'i').test(x.first_name)
.map((tourist, i) =>
              <tr>
                <td>{tourist.first_name}</td>
              </tr>)}

1 Ответ

0 голосов
/ 07 апреля 2020

Вы получаете разбитый на страницы список результатов из бэкэнда, но вы реализуете функцию поиска во внешнем интерфейсе.

Когда вы впервые go переходите на свою страницу, вы получаете первые 10 результатов с вашего сервера. , В то время ваше приложение React не подозревает, что нужно анализировать больше результатов, и может «видеть» только 10 разбитых на страницы результатов, отправляемых с вашего сервера. Отфильтровав эти результаты, вы не сможете получить любой другой результат, который не был отправлен сервером в первую очередь.

У вас есть 2 решения:

  1. Реализация клиента нумерации страниц -side,
  2. Реализация функции поиска на стороне сервера

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

Это оставляет нам вариант № 2. Добавив к вашему примеру кода, вы можете сделать что-то вроде: 

$tourists = Tourist::where('hotel_id', $request->hotel_id)
                   // Add this to filter results by first_name
                   ->where('first_name', 'like', "%{$request->first_name}%"))
                   ->orderBy('created_at', 'DESC')->paginate(10);

return $tourists;
...