提问人:Izilbeth 提问时间:6/15/2023 更新时间:6/19/2023 访问量:227
使用 primereact datatable 进行服务器端排序
Server-side sort with primereact datatable
问:
我尝试使用服务器端渲染来制作数据表。 我使用 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>
</>
)
}
答:
0赞
Izilbeth
6/19/2023
#1
我把懒惰添加到数据表中,没关系
评论