繁体   English   中英

以升序和降序方式对 Table 中的列进行排序

Sort columns in Table in ascending and descending way

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我用 React 和 MUI 创建了一个表,并尝试以升序和降序方式为每一列实现排序 function。 但是当我单击 header 对列进行排序时,我收到一个错误,在控制台中显示“数据不可迭代”,我无法弄清楚错误在哪里。

import React, {useEffect, useState} from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import TableSortLabel from "@mui/material/TableSortLabel";
import TablePagination from '@mui/material/TablePagination';

import { createStyles, TextField } from '@mui/material';
import "./table.css";


function createUserData (fullname, email, nationality, city){
    return {fullname, email, nationality, city};
}

const rows= [];

export default function RandomUserTable(){
    const [data, setData]= useState([]);

    // const [rowData, setRowData]= useState(rows);
    // const [orderDirection, setOrderDirection]= useState("asc");
    const [order, setOrder]=useState('asc');


    const [searchTerm, setSearchTerm]= useState('');

    const [page, setPage] =useState(0);
    const [rowsPerPage, setRowsPerPage] =useState(10);

    const handleChangePage = (event, newPage) => {
      setPage(newPage);
    };
  
    const handleChangeRowsPerPage = (event) => {
      setRowsPerPage(+event.target.value);
      setPage(0);
    };

    useEffect(()=>{
            fetch('https://randomuser.me/api/?results=30')
            .then((response) => {
                return response.json();
              })
              .then((data) => {
                setData(data);
                console.log(data);
              });
    }, []);

    const sorting=(col)=>{
      if(order==='asc'){
        const sorted= [...data].sort((a,b)=>
        a[col].toLowerCase()>b[col].toLowerCase()?1:-1
        );
        setData(sorted);
        setOrder('dsc')
      }
      if(order==='dsc'){
        const sorted= [...data].sort((a,b)=>
        a[col].toLowerCase()<b[col].toLowerCase()?1:-1
        );
        setData(sorted);
        setOrder('asc')
      }
    }

    // const sortArray= (arr, orderBy)=> {
    //     switch (orderBy){
    //         case "asc":              
    //             return [...arr].sort ((a,b)=>              
    //             a.city> b.city? 1:b.city > a.city? -1:0
    //                 );
    //         case "desc":
    //             return [...arr].sort((a, b)=>
    //             a.city < b.city ? 1 : b.city< a.city ? -1 : 0 
    //             );
    //     }
    // };

    // const handleSortRequest = ()=>{
    //     setRowData(sortArray(rows, orderDirection));
    //     setOrderDirection(orderDirection === "asc"? "desc":"asc");
    // }

    return (
        <>
        <TextField sx={{ width: 660, marginBottom: "2rem", marginTop: "2rem", border: "2px solid violet" }} className="text-field" onChange={event=>{setSearchTerm(event.target.value)}} placeholder="Search..."></TextField>

        <TableContainer component={Paper} sx={{width:800, margin: "0 auto"}}>
          <Table stickyHeader className="table" aria-label="simple table">
            <TableHead>
              <TableRow sx={{'& .MuiTableCell-root':{backgroundColor:"rgb(120, 169, 233)", border: "1px solid white", color: 'white'}}}>
                <TableCell  align="center">Fullname</TableCell>
                <TableCell onClick={()=>sorting("email")} align="center">E-Mail</TableCell>
                <TableCell onClick={()=>sorting("nat")} align="center">Nationality</TableCell>
                {/* <TableCell align="center" onClick={handleSortRequest}> */}
                <TableCell align="center">
                <TableSortLabel style={{color: 'white'}} active={true}>City</TableSortLabel>

                {/* <TableSortLabel style={{color: 'white'}} active={true} direction={orderDirection}>City</TableSortLabel> */}
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.results?.slice(page*rowsPerPage, page*rowsPerPage+rowsPerPage).filter((val)=>{
                if(searchTerm=== ""){
                    return val
                }else if(val.nat.toLowerCase().includes(searchTerm.toLowerCase()) ){
                    return val
                }else if(val.email.toLowerCase().includes(searchTerm.toLowerCase())){
                    return val
                }else if(val.location.city.toLowerCase().includes(searchTerm.toLowerCase())){
                    return val
                }
              }).map((user,index) => (
                <TableRow key={index} sx={{'& .MuiTableCell-root':{backgroundColor: 'rgba(54, 96, 129, 0.241)', height: '3rem'}}}>
                  <TableCell align="center" component="th" scope="row">
                  { (user.name.first)+ " " +(user.name.last)}
                  </TableCell>
                  <TableCell align="center">{user.email}</TableCell>
                  <TableCell align="center">{user.nat}</TableCell>
                  <TableCell align="center">{user.location.city}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
        <TablePagination
        rowsPerPageOptions={[10, 25, 100]}
        component="div"
        count={rows.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
        </>
      );
    }


在此处输入图像描述

问题暂未有回复.您可以查看右边的相关问题.
1 在 Python 中对字典进行降序和升序排序

我想按值对字典进行排序。 如果值相同,那么我想按键对其进行排序。 例如,如果我有字符串“bitter butter a butter baggy”,输出必须是 [(butter,2),(a,1),(baggy,1),(bitter,1))。 我下面的代码按值按降序对字典进行排序。 但我不能做第二 ...

2016-09-22 09:29:39 2 408   python
2 以特定方式排序,而不是升序或降序

我正在使用javascript排序方法。 我想按顺序1,4,3,0对项目的doc_requirement键进行排序,但是我得到的顺序是4,3,1,0。 如何实现特定顺序而不是按升序或降序排序? 预期产量 ...

3 对集合进行降序排序,但以升序方式等于值

当我有一个不等于firstValue和secondValue时,我试图对一个集合进行排序,我只是返回它的比较结果,它会以升序方式对其进行排序,但是当这些值等于时,我也想按名称以升序方式对其进行排序。 一切正常,但是当我必须按firstValue和secondValue以降序方式对集合进行排序时,我遇 ...

2020-06-22 11:44:20 1 60   java
4 按日期升序和降序排序的列

我需要对网页中的一些列进行排序,但我不知道问题出在哪里,我对 web 开发几乎不陌生,所以我需要很多帮助。 我想按日期顺序(asc 或 desc)对列进行排序,但这有一个问题,因为顺序都是错误的。 我正在搜索,也许这是组件(正面)的问题,因为它不了解列的动态。 我已经尝试过更改这些行: 但这并没有改 ...

5 按升序和降序对arrayList进行排序

下面的方法接收两个整数对象的数组列表和一个指示排序顺序的布尔值(升序,如果为true,则为降序,如果为false),并返回一个数组列表,其中两个数组中的所有元素都进行了排序。 我知道如何使用Arrays.sort(array)对单个数组列表进行排序,但是我迷路于如何组合两个数组列表。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM