В современном быстро меняющемся цифровом мире эффективное представление данных имеет решающее значение для обеспечения бесперебойного взаимодействия с пользователем. Веб-компоненты Salesforce Lightning (LWC) предлагают мощный инструмент под названием LWC Datatable, который позволяет отображать данные в табличном формате. Чтобы расширить его возможности, мы можем включить функцию поиска, которая позволит пользователям быстро находить нужную им информацию. В этой статье мы рассмотрим несколько методов реализации поиска в таблице данных LWC, дополненные разговорными пояснениями и примерами кода.

Метод 1: поиск на стороне клиента
Первый метод включает в себя реализацию функции поиска на стороне клиента, при которой поиск выполняется на стороне клиента без выполнения дополнительных запросов к серверу. Этот подход идеально подходит для небольших наборов данных, которые можно полностью загрузить в браузер.

Чтобы реализовать этот метод, вы можете начать с добавления поля ввода в HTML-шаблон компонента LWC. Это поле ввода служит строкой поиска, где пользователи могут вводить свои поисковые запросы. В соответствующем файле JavaScript вы можете использовать методы массива JavaScript, такие как filter(), для фильтрации данных на основе поискового запроса. Наконец, вы можете обновить источник данных таблицы данных с помощью отфильтрованных результатов, динамически обновляя отображаемые данные.

<template>
  <input type="text" placeholder="Search" onchange={handleSearch} />
  <lightning-datatable data={filteredData} columns={columns} key-field="id"></lightning-datatable>
</template>

handleSearch(event) {
  const searchQuery = event.target.value.toLowerCase();
  this.filteredData = this.data.filter((row) =>
    Object.values(row).some((value) => String(value).toLowerCase().includes(searchQuery))
  );
}

Метод 2: поиск на стороне сервера
Для больших наборов данных или сценариев, в которых вы хотите переложить операции поиска на сервер, лучшим подходом является реализация поиска на стороне сервера. Этот метод предполагает асинхронный вызов сервера для получения отфильтрованных данных на основе поискового запроса.

Чтобы реализовать этот метод, вам необходимо определить метод Apex, который выполняет поиск на стороне сервера и возвращает отфильтрованные данные. В своем компоненте LWC вы можете использовать службу данных Lightning (LDS) для вызова метода Apex и обработки возвращаемых результатов. Получив отфильтрованные данные, вы можете обновить таблицу данных новыми данными, обеспечивая удобство поиска.

<template>
  <input type="text" placeholder="Search" onchange={handleSearch} />
  <lightning-datatable data={data} columns={columns} key-field="id"></lightning-datatable>
</template>

import { LightningElement, wire } from 'lwc';
import searchRecords from '@salesforce/apex/YourApexClass.searchRecords';
export default class MyComponent extends LightningElement {
  @wire(searchRecords, { searchQuery: '$searchQuery' })
  searchData({ data, error }) {
    if (data) {
      this.data = data;
    } else if (error) {
      // Handle error
    }
  }
  handleSearch(event) {
    this.searchQuery = event.target.value;
  }
}

Добавление функции поиска в таблицу данных LWC может значительно улучшить взаимодействие с пользователем, позволяя пользователям быстро находить нужную информацию. В этой статье мы рассмотрели два метода: поиск на стороне клиента и поиск на стороне сервера. Поиск на стороне клиента подходит для небольших наборов данных, тогда как поиск на стороне сервера больше подходит для больших наборов данных. Реализовав любой из этих методов, вы сможете предоставить пользователям мощные возможности отображения и поиска данных.