使用 primereact datatable 进行服务器端排序

Server-side sort with primereact datatable

提问人:Izilbeth 提问时间:6/15/2023 更新时间:6/19/2023 访问量:227

问:

我尝试使用服务器端渲染来制作数据表。 我使用 primereact datatable v9.5

我在多列排序方面遇到了问题:从服务器接收的数据是正确的,但primereact再次对数据进行排序。 所以我

例如,数据的一部分。

data = [{id:1, name:"alex"},
{id:2, name:"124"},
{id:3, name:"5"}]

我想按名称排序 服务器响应 :

[{id:3, name:"124"},
{id:2, name:"5"},
{id:1, name:"alex"}]

并显示数据:

[{id:2, name:"5"},
{id:3, name:"124"},
{id:1, name:"alex"}]

这是我代码的一部分:

function DatatableContacts(props: {
  data: Array<ContactInterface>
  totalRecords: number
  loading: boolean
}) {
  const [data, setData] = useState(props.data) //données à afficher

  const [first1, setFirstRow] = useState(0)
  const [rowsPerPage, setRowsPerPage] = useState(10)
  const [nbDataDisplayed, setNbDataDisplayed] = useState(props.totalRecords)
  //initialisation du tri
  const [sortMeta, setSortMeta] = useState([])

  //fonction appel API
  const fetchData = async (
    page: number,
    itemsPerPage: number,
    sort?: Array<{ field: string; order: number }>
  ) => {
    //function to get data from API
setData(fetchedData)
  }


  const handleSort = async (e: any) => {
    setSortMeta(e.multiSortMeta)
    await fetchData(1, rowsPerPage, e.multiSortMeta)
    setFirstRow(0)
  }


  return (
    <>
      <DataTable
        value={data}
        rows={rowsPerPage}
        first={first1}
        multiSortMeta={sortMeta}
        sortMode="multiple"
        responsiveLayout="scroll"
        dataKey="id"
        loading={isLoading}
        removableSort
        onSort={handleSort}
      >
        <Column
          field="id"
          header={t('contacts.id')}
        ></Column>
        <Column
          field="person.firstname"
          header={t('contacts.firstname')}
          sortable
        ></Column>
        <Column
          field="person.lastname"
          header={t('contacts.lastname')}
          sortable
        ></Column>

      </DataTable>
    </>
  )
}

DataTable 服务器端 Primereact

评论


答:

0赞 Izilbeth 6/19/2023 #1

我把懒惰添加到数据表中,没关系