英文:
How to filter multiple table columns in reactjs
问题
在下面的React组件返回语句中，我有两个搜索框。按姓名搜索正常工作，但如何添加另一个搜索条件来按地块号搜索呢？
是否可以在同一过滤语句中添加另一个三元运算符？还是我需要为地块号列编写单独的语句？
return (
<>
<div className="input-group mb-3">
<form>
<input type='text' className="form-control searchBar" placeholder='按姓名搜索' onChange={(e) => setSearch(e.target.value)}></input>
</form>
<form>
<input type='text' className="form-control searchBar" placeholder='按地块号搜索' onChange={(e) => setSearch(e.target.value)}></input>
</form>
</div>
{isLoading ?
<div className='circle'>
<Box sx={{ display: 'flex' }}>
<CircularProgress />
<h1>Loading</h1>
</Box>
</div> :
<div>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="简单表格">
<TableHead>
<TableRow>
<TableCell align="left">区域</TableCell>
<TableCell align="left">地块号</TableCell>
<TableCell align="left">街道</TableCell>
<TableCell align="left">大小</TableCell>
<TableCell align="left">姓名</TableCell>
<TableCell align="left">联系电话</TableCell>
<TableCell align="left">地址</TableCell>
<TableCell align="left">操作</TableCell>
</TableRow>
</TableHead>
<TableBody>
{properties.filter((row) => {
return search.toLowerCase() === '' ? row : row.Name.toLowerCase().includes(search)
}).map((row) => (
<TableRow
key={row._id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell align="left">{row.Sector}</TableCell>
<TableCell align="left">{row["Plot No"]}</TableCell>
<TableCell align="left">{row.Street}</TableCell>
<TableCell align="left">{row.Size}</TableCell>
<TableCell align="left">{row.Name}</TableCell>
<TableCell align="left">{row["Contact No"]}</TableCell>
<TableCell align="left">{row.Address}</TableCell>
<TableCell align="left" >
<Link to={`/property/${row._id}`}>
<Button variant='contained'>详情</Button>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>}
</>
)}
英文:
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?
**return (
<>
<div class="input-group mb-3">
<form>
<input type='text' className="form-control searchBar" placeholder='Search by Name' onChange={(e)=> setSearch(e.target.value)}></input>
</form>
<form>
<input type='text' className="form-control searchBar" placeholder='Search by Plot No' onChange={(e)=> setSearch(e.target.value)}></input>
</form>
</div>
{isLoading ?
<div className='circle'>
<Box sx={{ display: 'flex' }}>
<CircularProgress />
<h1>Loading</h1>
</Box>
</div>:
<div>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="left">Sector</TableCell>
<TableCell align="left">Plot No</TableCell>
<TableCell align="left">Street</TableCell>
<TableCell align="left">Size</TableCell>
<TableCell align="left">Name</TableCell>
<TableCell align="left">Contact No</TableCell>
<TableCell align="left">Address</TableCell>
<TableCell align="left">Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{properties.filter((row) =>{
return search.toLowerCase() === '' ? row : row.Name.toLowerCase().includes(search)}).map((row) => (
<TableRow
key={row._id
}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell align="left">{row.Sector}</TableCell>
<TableCell align="left">{row["Plot No"]}</TableCell>
<TableCell align="left">{row.Street}</TableCell>
<TableCell align="left">{row.Size}</TableCell>
<TableCell align="left">{row.Name}</TableCell>
<TableCell align="left">{row["Contact No"]}</TableCell>
<TableCell align="left">{row.Address}</TableCell>
<TableCell align="left" >
<Link to ={`/property/${row._id}` }>
<Button variant='contained'>Details</Button>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>}
</>
)}**
答案1
得分: 0
你可以修改筛选函数以通过姓名和地块号进行搜索：
return (
<>
<div className="input-group mb-3">
<form>
<input
type='text'
className="form-control searchBar"
placeholder='按姓名搜索'
onChange={(e) => setSearch(e.target.value)}
/>
</form>
<form>
<input
type='text'
className="form-control searchBar"
placeholder='按地块号搜索'
onChange={(e) => setSearchPlotNo(e.target.value)} {/* 需要为地块号搜索创建新状态 */}
/>
</form>
</div>
{isLoading ? (
<div className='circle'>
<Box sx={{ display: 'flex' }}>
<CircularProgress />
<h1>Loading</h1>
</Box>
</div>
) : (
<div>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="简单表格">
<TableHead>
<TableRow>
<TableCell align="left">区域</TableCell>
<TableCell align="left">地块号</TableCell>
<TableCell align="left">街道</TableCell>
<TableCell align="left">大小</TableCell>
<TableCell align="left">姓名</TableCell>
<TableCell align="left">联系方式</TableCell>
<TableCell align="left">地址</TableCell>
<TableCell align="left">操作</TableCell>
</TableRow>
</TableHead>
<TableBody>
{properties
.filter((row) =>
search.toLowerCase() === '' ||
row.Name.toLowerCase().includes(search) ||
row["Plot No"].toLowerCase().includes(searchPlotNo) // 使用新的搜索状态
)
.map((row) => (
<TableRow
key={row._id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell align="left">{row.Sector}</TableCell>
<TableCell align="left">{row["Plot No"]}</TableCell>
<TableCell align="left">{row.Street}</TableCell>
<TableCell align="left">{row.Size}</TableCell>
<TableCell align="left">{row.Name}</TableCell>
<TableCell align="left">{row["Contact No"]}</TableCell>
<TableCell align="left">{row.Address}</TableCell>
<TableCell align="left">
<Link to={`/property/${row._id}`}>
<Button variant='contained'>详情</Button>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
)}
</>
)}
英文:
You can modify the filter function to search by both Name and Plot No:
return (
<>
<div className="input-group mb-3">
<form>
<input
type='text'
className="form-control searchBar"
placeholder='Search by Name'
onChange={(e) => setSearch(e.target.value)}
/>
</form>
<form>
<input
type='text'
className="form-control searchBar"
placeholder='Search by Plot No'
onChange={(e) => setSearchPlotNo(e.target.value)} {/* Cần tạo state mới cho việc tìm kiếm theo Plot No */}
/>
</form>
</div>
{isLoading ? (
<div className='circle'>
<Box sx={{ display: 'flex' }}>
<CircularProgress />
<h1>Loading</h1>
</Box>
</div>
) : (
<div>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="left">Sector</TableCell>
<TableCell align="left">Plot No</TableCell>
<TableCell align="left">Street</TableCell>
<TableCell align="left">Size</TableCell>
<TableCell align="left">Name</TableCell>
<TableCell align="left">Contact No</TableCell>
<TableCell align="left">Address</TableCell>
<TableCell align="left">Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{properties
.filter((row) =>
search.toLowerCase() === '' ||
row.Name.toLowerCase().includes(search) ||
row["Plot No"].toLowerCase().includes(searchPlotNo) // Sử dụng state tìm kiếm mới
)
.map((row) => (
<TableRow
key={row._id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell align="left">{row.Sector}</TableCell>
<TableCell align="left">{row["Plot No"]}</TableCell>
<TableCell align="left">{row.Street}</TableCell>
<TableCell align="left">{row.Size}</TableCell>
<TableCell align="left">{row.Name}</TableCell>
<TableCell align="left">{row["Contact No"]}</TableCell>
<TableCell align="left">{row.Address}</TableCell>
<TableCell align="left">
<Link to={`/property/${row._id}`}>
<Button variant='contained'>Details</Button>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
)}
</>
)}
答案2
得分: 0
我可以通过以下修改来解决这个问题。
{properties.filter((row) => {
return search.toLowerCase() === '' ? row : row.Name.toLowerCase().includes(search) || row["Plot No"].includes(search)
}).map((row) => (
但是每个文本框仍然会搜索整个表格，而我希望从筛选后的结果中过滤结果。
英文:
I am able to resolve this issue by below modification.
{properties.filter((row) =>{
return search.toLowerCase() === '' ? row : row.Name.toLowerCase().includes(search) || row["Plot No"].includes(search) }).map((row) => (
But still Each Text box searches entire table. while i want to filter results from filtered results.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论