当serverSide为真时，搜索在mui-datatable，reactjs中不起作用？答案

【问题标题】：Search is not working in mui-datatable, reactjs when serverSide is true?当serverSide为真时，搜索在mui-datatable，reactjs中不起作用？
【发布时间】：2022-01-07 21:55:21
【问题描述】：

嘿，我已经在我的项目中实现了 mui-datatable。一切正常，但是当我在选项中启用 serverSide: true 时搜索栏无法正常工作。

const options = {
    filter: true,
    count: state.count,
    rowsPerPage: state.rowsPerPage,
    serverSide: true,
}

如果您想了解有关此问题的任何说明，请随时询问。

请帮帮我。

问候

【问题讨论】：

标签： javascript reactjs mui-datatable

【解决方案1】：

这里我提供一些代码，以便概念清晰。

在这里我声明了一些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} />

More Details

【讨论】：

你为什么在changeRowsPage和search这两种情况下都调用changePage函数。
如您所见changePage 接收newTableState 作为参数。所以你应该准备newTableState 与所有条件，例如，搜索词、分页信息（pageNo 和 pageLimit）、过滤条件等。所以newTableState 将包含所有输入并将其传递给changePage 函数。