搜索在 mui-datatable 中不起作用,当 serverSide 为真时 reactjs?
Search is not working in mui-datatable, reactjs when serverSide is true?
嘿,我在我的项目中实现了 mui-datatable。一切正常,但当我在选项中启用 serverSide: true 时搜索栏不工作。
const options = {
filter: true,
count: state.count,
rowsPerPage: state.rowsPerPage,
serverSide: true,
}
如果您想了解有关此问题的任何说明,请随时询问。
请帮助我。
此致
这里我提供了一些代码,这样概念上就清楚了。
在这里我声明了一些states
以便我们可以将它们用于paging or data loading
const [data, setData] = useState(carStocks);
const [page, setPage] = useState(0);
const [total, setTotal] = useState(0);
定义将调用 api 的方法并使用 setData
设置数据
function changePage(newTableState) {
let state = {
...tableState, ...newTableState,
pageNo: newTableState.page + 1,
pageSize: newTableState.rowsPerPage,
searchText: newTableState.searchText
};
setTableState(state);
// CALL API with state parameter
// setData(data);
// setPage(page);
// setTotal(total);
}
在这里声明你的columns
const columns = [
{
name: 'name',
label: 'Name',
options: {
filter: false,
sort: false,
viewColumns: true
}
},
{
name: 'title',
label: 'TITLE',
options: {
filter: false,
sort: false,
viewColumns: true
}
},
];
在这里声明你的 options
。在选项中,您必须使用 serverSide: true
,如果您使用 serverSide: true
,则必须将 count、page、rowsPerPage 与基于从 api.
中找到的数据大小的值绑定
const options = {
serverSide: true,
count: total,
page: page,
rowsPerPage: tableState.pageSize,
selectableRows: 'multiple',
searchText: tableState.searchText,
searchPlaceholder: 'Type Car Title to Search',
textLabels: {
body: {
noMatch: loading ?
<CircularProgress color='secondary' size={40} /> :
'SORRY_THERE_IS_NO_MATCHING_DATA_TO_DISPLAY'
}
},
onTableChange: (action, newTableState) => {
switch (action) {
case 'changePage':
case 'changeRowsPerPage':
changePage(newTableState);
break;
case 'search':
changePage(newTableState);
break;
case 'filterChange':
handleFilterSubmit(newTableState.filterList);
break;
}
}
};
终于可以使用 data
、columns
和 options
<MUIDataTable data={data} columns={columns} options={options} />
嘿,我在我的项目中实现了 mui-datatable。一切正常,但当我在选项中启用 serverSide: true 时搜索栏不工作。
const options = {
filter: true,
count: state.count,
rowsPerPage: state.rowsPerPage,
serverSide: true,
}
如果您想了解有关此问题的任何说明,请随时询问。
请帮助我。
此致
这里我提供了一些代码,这样概念上就清楚了。
在这里我声明了一些states
以便我们可以将它们用于paging or data loading
const [data, setData] = useState(carStocks);
const [page, setPage] = useState(0);
const [total, setTotal] = useState(0);
定义将调用 api 的方法并使用 setData
function changePage(newTableState) {
let state = {
...tableState, ...newTableState,
pageNo: newTableState.page + 1,
pageSize: newTableState.rowsPerPage,
searchText: newTableState.searchText
};
setTableState(state);
// CALL API with state parameter
// setData(data);
// setPage(page);
// setTotal(total);
}
在这里声明你的columns
const columns = [
{
name: 'name',
label: 'Name',
options: {
filter: false,
sort: false,
viewColumns: true
}
},
{
name: 'title',
label: 'TITLE',
options: {
filter: false,
sort: false,
viewColumns: true
}
},
];
在这里声明你的 options
。在选项中,您必须使用 serverSide: true
,如果您使用 serverSide: true
,则必须将 count、page、rowsPerPage 与基于从 api.
const options = {
serverSide: true,
count: total,
page: page,
rowsPerPage: tableState.pageSize,
selectableRows: 'multiple',
searchText: tableState.searchText,
searchPlaceholder: 'Type Car Title to Search',
textLabels: {
body: {
noMatch: loading ?
<CircularProgress color='secondary' size={40} /> :
'SORRY_THERE_IS_NO_MATCHING_DATA_TO_DISPLAY'
}
},
onTableChange: (action, newTableState) => {
switch (action) {
case 'changePage':
case 'changeRowsPerPage':
changePage(newTableState);
break;
case 'search':
changePage(newTableState);
break;
case 'filterChange':
handleFilterSubmit(newTableState.filterList);
break;
}
}
};
终于可以使用 data
、columns
和 options
<MUIDataTable data={data} columns={columns} options={options} />