如何在React.js中筛选多个表格列

huangapple
go评论96阅读模式
英文:

How to filter multiple table columns in reactjs

问题

在下面的React组件的返回语句中，我有两个搜索框。按名称搜索正常工作，但是如何添加另一个搜索条件以按Plot No搜索呢？
是否可以在同一个过滤语句中添加另一个三元运算符？还是我需要为Plot No列编写单独的语句？

  1. return (
  2.     <>
  3.         <div class="input-group mb-3">
  4.             <form>
  5.                 <input type='text' className="form-control searchBar" placeholder='按名称搜索' onChange={(e)=> setSearch(e.target.value)}></input>
  6.             </form>
  8.             <form>
  9.                 <input type='text' className="form-control searchBar" placeholder='按Plot No搜索' onChange={(e)=> setSearch(e.target.value)}></input>
  10.             </form>
  11.         </div>
  12.         {isLoading ? 
  13.         <div className='circle'>
  14.             <Box sx={{ display: 'flex' }}>
  15.                 <CircularProgress />
  16.                 <h1>Loading</h1>
  17.             </Box>
  18.         </div>:
  20.         <div>
  21.             <TableContainer component={Paper}>
  22.                 <Table sx={{ minWidth: 650 }} aria-label="simple table">
  23.                     <TableHead>
  24.                         <TableRow>
  25.                             <TableCell align="left">Sector</TableCell>
  26.                             <TableCell align="left">Plot No</TableCell>
  27.                             <TableCell align="left">Street</TableCell>
  28.                             <TableCell align="left">Size</TableCell>
  29.                             <TableCell align="left">Name</TableCell>
  30.                             <TableCell align="left">Contact No</TableCell>
  31.                             <TableCell align="left">Address</TableCell>
  32.                             <TableCell align="left">Action</TableCell>
  33.                         </TableRow>
  34.                     </TableHead>
  35.                     <TableBody>
  36.                         {properties.filter((row) =>{
  37.                             return search.toLowerCase() === '' ? row : row.Name.toLowerCase().includes(search)
  38.                         }).map((row) => (
  39.                             <TableRow key={row._id} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
  40.                                 <TableCell align="left">{row.Sector}</TableCell>
  41.                                 <TableCell align="left">{row["Plot No"]}</TableCell>
  42.                                 <TableCell align="left">{row.Street}</TableCell>
  43.                                 <TableCell align="left">{row.Size}</TableCell>
  44.                                 <TableCell align="left">{row.Name}</TableCell>
  45.                                 <TableCell align="left">{row["Contact No"]}</TableCell>
  46.                                 <TableCell align="left">{row.Address}</TableCell>
  47.                                 <TableCell align="left">
  48.                                     <Link to={`/property/${row._id}`}>
  49.                                         <Button variant='contained'>Details</Button>
  50.                                     </Link>
  51.                                 </TableCell>
  52.                             </TableRow>
  53.                         ))}
  54.                     </TableBody>
  55.                 </Table>
  56.             </TableContainer>
  57.         </div>}
  58.     </>
  59. )}
英文:

In below react component return statement I have two search boxes. Search by name is working fine but how can i add another search criteria to search by Plot No.
Is it possible to add another turnery operator in same filter statement? or do I need to write separate statement for Plot No column?

  1. **return (
  2. &lt;&gt;
  3. &lt;div class=&quot;input-group mb-3&quot;&gt;
  4. &lt;form&gt;
  5. &lt;input type=&#39;text&#39; className=&quot;form-control searchBar&quot; placeholder=&#39;Search by Name&#39; onChange={(e)=&gt; setSearch(e.target.value)}&gt;&lt;/input&gt;
  6. &lt;/form&gt;
  7. &lt;form&gt;
  8. &lt;input type=&#39;text&#39; className=&quot;form-control searchBar&quot; placeholder=&#39;Search by Plot No&#39; onChange={(e)=&gt; setSearch(e.target.value)}&gt;&lt;/input&gt;
  9. &lt;/form&gt;
  10. &lt;/div&gt;
  11. {isLoading ? 
  12. &lt;div className=&#39;circle&#39;&gt;
  13. &lt;Box sx={{ display: &#39;flex&#39; }}&gt;
  14. &lt;CircularProgress /&gt;
  15. &lt;h1&gt;Loading&lt;/h1&gt;
  16. &lt;/Box&gt;
  17. &lt;/div&gt;:
  18. &lt;div&gt;
  19. &lt;TableContainer component={Paper}&gt;
  20. &lt;Table sx={{ minWidth: 650 }} aria-label=&quot;simple table&quot;&gt;
  21. &lt;TableHead&gt;
  22. &lt;TableRow&gt;
  23. &lt;TableCell align=&quot;left&quot;&gt;Sector&lt;/TableCell&gt;
  24. &lt;TableCell align=&quot;left&quot;&gt;Plot No&lt;/TableCell&gt;
  25. &lt;TableCell align=&quot;left&quot;&gt;Street&lt;/TableCell&gt;
  26. &lt;TableCell align=&quot;left&quot;&gt;Size&lt;/TableCell&gt;
  27. &lt;TableCell align=&quot;left&quot;&gt;Name&lt;/TableCell&gt;
  28. &lt;TableCell align=&quot;left&quot;&gt;Contact No&lt;/TableCell&gt;
  29. &lt;TableCell align=&quot;left&quot;&gt;Address&lt;/TableCell&gt;
  30. &lt;TableCell align=&quot;left&quot;&gt;Action&lt;/TableCell&gt;
  31. &lt;/TableRow&gt;
  32. &lt;/TableHead&gt;
  33. &lt;TableBody&gt;
  34. {properties.filter((row) =&gt;{
  35. return search.toLowerCase() === &#39;&#39; ? row : row.Name.toLowerCase().includes(search)}).map((row) =&gt; (
  36. &lt;TableRow
  37. key={row._id
  38. }
  39. sx={{ &#39;&amp;:last-child td, &amp;:last-child th&#39;: { border: 0 } }}
  40. &gt; 
  41. &lt;TableCell align=&quot;left&quot;&gt;{row.Sector}&lt;/TableCell&gt;
  42. &lt;TableCell align=&quot;left&quot;&gt;{row[&quot;Plot No&quot;]}&lt;/TableCell&gt;
  43. &lt;TableCell align=&quot;left&quot;&gt;{row.Street}&lt;/TableCell&gt;
  44. &lt;TableCell align=&quot;left&quot;&gt;{row.Size}&lt;/TableCell&gt;
  45. &lt;TableCell align=&quot;left&quot;&gt;{row.Name}&lt;/TableCell&gt;
  46. &lt;TableCell align=&quot;left&quot;&gt;{row[&quot;Contact No&quot;]}&lt;/TableCell&gt;
  47. &lt;TableCell align=&quot;left&quot;&gt;{row.Address}&lt;/TableCell&gt;
  48. &lt;TableCell align=&quot;left&quot; &gt;
  49. &lt;Link to ={`/property/${row._id}` }&gt;
  50. &lt;Button variant=&#39;contained&#39;&gt;Details&lt;/Button&gt;
  51. &lt;/Link&gt;
  52. &lt;/TableCell&gt;             
  53. &lt;/TableRow&gt;            
  54. ))}
  55. &lt;/TableBody&gt;
  56. &lt;/Table&gt;
  57. &lt;/TableContainer&gt;
  58. &lt;/div&gt;}
  59. &lt;/&gt;
  60. )}**

答案1

得分: 0

你可以修改过滤函数以通过名称和地块号进行搜索：

  1. return (
  2.     <>
  3.         <div className="input-group mb-3">
  4.             <form>
  5.                 <input
  6.                     type='text'
  7.                     className="form-control searchBar"
  8.                     placeholder='按名称搜索'
  9.                     onChange={(e) => setSearch(e.target.value)}
  10.                 />
  11.             </form>
  13.             <form>
  14.                 <input
  15.                     type='text'
  16.                     className="form-control searchBar"
  17.                     placeholder='按地块号搜索'
  18.                     onChange={(e) => setSearchPlotNo(e.target.value)} {/* Cần tạo state mới cho việc tìm kiếm theo Plot No */}
  19.                 />
  20.             </form>
  21.         </div>
  23.         {isLoading ? (
  24.             <div className='circle'>
  25.                 <Box sx={{ display: 'flex' }}>
  26.                     <CircularProgress />
  27.                     <h1>Loading</h1>
  28.                 </Box>
  29.             </div>
  30.         ) : (
  31.             <div>
  32.                 <TableContainer component={Paper}>
  33.                     <Table sx={{ minWidth: 650 }} aria-label="simple table">
  34.                         <TableHead>
  35.                             <TableRow>
  36.                                 <TableCell align="left">区块</TableCell>
  37.                                 <TableCell align="left">地块号</TableCell>
  38.                                 <TableCell align="left">街道</TableCell>
  39.                                 <TableCell align="left">面积</TableCell>
  40.                                 <TableCell align="left">名称</TableCell>
  41.                                 <TableCell align="left">联系电话</TableCell>
  42.                                 <TableCell align="left">地址</TableCell>
  43.                                 <TableCell align="left">操作</TableCell>
  44.                             </TableRow>
  45.                         </TableHead>
  46.                         <TableBody>
  47.                             {properties
  48.                                 .filter((row) =>
  49.                                     search.toLowerCase() === '' ||
  50.                                     row.Name.toLowerCase().includes(search) ||
  51.                                     row["Plot No"].toLowerCase().includes(searchPlotNo) // Sử dụng state tìm kiếm mới
  52.                                 )
  53.                                 .map((row) => (
  54.                                     <TableRow
  55.                                         key={row._id}
  56.                                         sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
  57.                                     >
  58.                                         <TableCell align="left">{row.Sector}</TableCell>
  59.                                         <TableCell align="left">{row["Plot No"]}</TableCell>
  60.                                         <TableCell align="left">{row.Street}</TableCell>
  61.                                         <TableCell align="left">{row.Size}</TableCell>
  62.                                         <TableCell align="left">{row.Name}</TableCell>
  63.                                         <TableCell align="left">{row["Contact No"]}</TableCell>
  64.                                         <TableCell align="left">{row.Address}</TableCell>
  65.                                         <TableCell align="left">
  66.                                             <Link to={`/property/${row._id}`}>
  67.                                                 <Button variant='contained'>详情</Button>
  68.                                             </Link>
  69.                                         </TableCell>
  70.                                     </TableRow>
  71.                                 ))}
  72.                         </TableBody>
  73.                     </Table>
  74.                 </TableContainer>
  75.             </div>
  76.         )}
  77.     </>
  78. )}
英文:

You can modify the filter function to search by both Name and Plot No:

  1. return (
  2. &lt;&gt;
  3. &lt;div className=&quot;input-group mb-3&quot;&gt;
  4. &lt;form&gt;
  5. &lt;input
  6. type=&#39;text&#39;
  7. className=&quot;form-control searchBar&quot;
  8. placeholder=&#39;Search by Name&#39;
  9. onChange={(e) =&gt; setSearch(e.target.value)}
  10. /&gt;
  11. &lt;/form&gt;
  12. &lt;form&gt;
  13. &lt;input
  14. type=&#39;text&#39;
  15. className=&quot;form-control searchBar&quot;
  16. placeholder=&#39;Search by Plot No&#39;
  17. onChange={(e) =&gt; setSearchPlotNo(e.target.value)} {/* Cần tạo state mới cho việc t&#236;m kiếm theo Plot No */}
  18. /&gt;
  19. &lt;/form&gt;
  20. &lt;/div&gt;
  21. {isLoading ? (
  22. &lt;div className=&#39;circle&#39;&gt;
  23. &lt;Box sx={{ display: &#39;flex&#39; }}&gt;
  24. &lt;CircularProgress /&gt;
  25. &lt;h1&gt;Loading&lt;/h1&gt;
  26. &lt;/Box&gt;
  27. &lt;/div&gt;
  28. ) : (
  29. &lt;div&gt;
  30. &lt;TableContainer component={Paper}&gt;
  31. &lt;Table sx={{ minWidth: 650 }} aria-label=&quot;simple table&quot;&gt;
  32. &lt;TableHead&gt;
  33. &lt;TableRow&gt;
  34. &lt;TableCell align=&quot;left&quot;&gt;Sector&lt;/TableCell&gt;
  35. &lt;TableCell align=&quot;left&quot;&gt;Plot No&lt;/TableCell&gt;
  36. &lt;TableCell align=&quot;left&quot;&gt;Street&lt;/TableCell&gt;
  37. &lt;TableCell align=&quot;left&quot;&gt;Size&lt;/TableCell&gt;
  38. &lt;TableCell align=&quot;left&quot;&gt;Name&lt;/TableCell&gt;
  39. &lt;TableCell align=&quot;left&quot;&gt;Contact No&lt;/TableCell&gt;
  40. &lt;TableCell align=&quot;left&quot;&gt;Address&lt;/TableCell&gt;
  41. &lt;TableCell align=&quot;left&quot;&gt;Action&lt;/TableCell&gt;
  42. &lt;/TableRow&gt;
  43. &lt;/TableHead&gt;
  44. &lt;TableBody&gt;
  45. {properties
  46. .filter((row) =&gt;
  47. search.toLowerCase() === &#39;&#39; ||
  48. row.Name.toLowerCase().includes(search) ||
  49. row[&quot;Plot No&quot;].toLowerCase().includes(searchPlotNo) // Sử dụng state t&#236;m kiếm mới
  50. )
  51. .map((row) =&gt; (
  52. &lt;TableRow
  53. key={row._id}
  54. sx={{ &#39;&amp;:last-child td, &amp;:last-child th&#39;: { border: 0 } }}
  55. &gt;
  56. &lt;TableCell align=&quot;left&quot;&gt;{row.Sector}&lt;/TableCell&gt;
  57. &lt;TableCell align=&quot;left&quot;&gt;{row[&quot;Plot No&quot;]}&lt;/TableCell&gt;
  58. &lt;TableCell align=&quot;left&quot;&gt;{row.Street}&lt;/TableCell&gt;
  59. &lt;TableCell align=&quot;left&quot;&gt;{row.Size}&lt;/TableCell&gt;
  60. &lt;TableCell align=&quot;left&quot;&gt;{row.Name}&lt;/TableCell&gt;
  61. &lt;TableCell align=&quot;left&quot;&gt;{row[&quot;Contact No&quot;]}&lt;/TableCell&gt;
  62. &lt;TableCell align=&quot;left&quot;&gt;{row.Address}&lt;/TableCell&gt;
  63. &lt;TableCell align=&quot;left&quot;&gt;
  64. &lt;Link to={`/property/${row._id}`}&gt;
  65. &lt;Button variant=&#39;contained&#39;&gt;Details&lt;/Button&gt;
  66. &lt;/Link&gt;
  67. &lt;/TableCell&gt;
  68. &lt;/TableRow&gt;
  69. ))}
  70. &lt;/TableBody&gt;
  71. &lt;/Table&gt;
  72. &lt;/TableContainer&gt;
  73. &lt;/div&gt;
  74. )}
  75. &lt;/&gt;
  76. )}

答案2

得分: 0

我可以通过以下修改来解决这个问题。

  1. {properties.filter((row) => {
  2.     return search.toLowerCase() === '' ? row : row.Name.toLowerCase().includes(search) || row["Plot No"].includes(search)
  3. }).map((row) => (

但是，每个文本框仍然会搜索整个表格，而我希望从已过滤的结果中筛选结果。

英文:

I am able to resolve this issue by below modification.

  1. {properties.filter((row) =&gt;{
  2. return search.toLowerCase() === &#39;&#39; ? row : row.Name.toLowerCase().includes(search) || row[&quot;Plot No&quot;].includes(search) }).map((row) =&gt; (

But still Each Text box searches entire table. while i want to filter results from filtered results.

huangapple
  • 本文由 发表于 2023年8月9日 12:04:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/76864492.html
  • reactjs
  • tablefilter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定