Mencari data dalam kolom tabel dengan pagination (bagian depan)

pengantar

Selamat sore semuanya. Nama saya Alexander. Sekarang saya bekerja di Megafon sebagai front-end developer. Masalah pengambilan data selalu sangat kompleks dan seringkali tidak standar dalam pendekatannya. Hari ini saya ingin fokus pada satu masalah menarik yang harus saya selesaikan baru-baru ini selama pengembangan platform IoT. Namun, tugas seperti itu juga dapat ditemui pada proyek lain mana pun yang memuat data dinamis melalui REST API. Apakah itu memuat selama paginasi, atau selama pengguliran, atau sesuatu yang lain ...

Bermasalah

Tampaknya: apa yang bisa menjadi kesulitannya. Apalagi kalau bicara hanya ke depan? Bagaimanapun, semua algoritma pencarian diterapkan terutama di back-end. Nyatanya, ya dan tidak. Mari kita bayangkan spreadsheet sederhana yang memiliki banyak halaman pagination dan filter pada setiap kolom. Lihat di bawah.

Di pelat ini, filter dengan kolom nomor BS terbuka. Dengan kata sederhana: dengan memasukkan karakter apa pun di bidang masukan filter, Anda mendapatkan opsi yang sesuai di tarik-turun. Dengan mengklik salah satunya, Anda akan memfilter data di tabel berdasarkan elemen ini.

Bagaimana Anda bisa menampilkan dropdown seperti itu dengan opsi yang diperlukan? 

Opsi solusi

1. filter includes ( ) . , , . . .

   
   
   
   
   

2. 1- , . , 0. 1 ? .

   
   
   
   
   

3. , . “” , .

   
   
   
   
   

   . . : , , .

   
   
   
   
   

1. , , . config.

   
   
   
   
   

2. . , debounce.

   
   
   
   
   

3. / loader

   
   
   
   
   

4. 
   
   
   
   

, JS React , , JS. . 

, . , ( ) . 2 .

:

{
  id: 'address',
  title: ' ',
  filter: filters.address,
  checked: true,
  minWidth: 160
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

address: {
  type: 'includes',
  name: 'addrFilter',
  options: {
    default: {
      values: 'objectsList',
      fetchFunc: 'fetchObjectsList',
      calcFunc: 'address'
    }
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

- . .

options . :

• fetchFunc - thunk ,

  
  
  
  
  

• values - ,

  
  
  
  
  

• calcFunc -

  
  
  
  
  

calcFun. , . , . : = + + …

. :

//object includes calc functions
const calculatedData = useMemo(() => (
  {
    default: (values) =>
    {
      //default calculate
    },
    address: (values) =>
    {
      //calculate with generateAddress function, for example
    },
    ...
	}
), [...]);

//using this object (calcFunc from config):
const data = calculatedData[calcFunc || 'default'](values)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. . , - . :

// debounce function
const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};

//debounceFetch function
const debounceFetch = debounce(async (func, args) => 
  typeof func === 'function' && (await func(args)), 500);

//sending request
useEffect(() => {
  debounceFetch(actions[fetchFunc], { 
    filter: { [filterName]: filterValue || null } 
  });
}, [filter]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. - , , . , , , isLoading. , isLoadingObjects. selector kea, = true , isLoading, true.

kea, redux - - , . - . kea =)

anyLoading===true, .

. , , calcFunc .

, , useFiltersOptions.

, : , , . , , .

, , .