React项目mui-datatables开启serverSide为true时搜索功能失效问题

开启serverSide: true配置后，MUI Datatable会关闭所有前端本地数据处理逻辑，所有搜索、过滤、分页、排序操作都需要由开发者手动对接后端接口实现，前端不会再自动过滤本地数据。

解决方案 #

• 在options配置中添加onSearchChange事件回调，监听搜索框的内容变化
• 在搜索回调中携带当前搜索关键词调用后端查询接口，获取后端过滤后的数据集
• 更新表格绑定的数据源、总条数count等状态，刷新表格展示搜索结果

完整配置示例 #

const options = {
    filter: true,
    count: state.count,
    rowsPerPage: state.rowsPerPage,
    serverSide: true,
    // 新增搜索事件监听
    onSearchChange: (searchText) => {
        // 调用后端接口，传入搜索关键词、当前页码、每页条数等参数
        fetchTableData({
            search: searchText,
            page: state.currentPage,
            rowsPerPage: state.rowsPerPage
        }).then(res => {
            // 更新状态：数据源、总条数、当前页码等
            setState({
                ...state,
                data: res.list,
                count: res.total
            })
        })
    },
    // 可选：如果需要同时处理分页、排序等其他服务端操作，可以统一监听onTableChange
    onTableChange: (action, tableState) => {
        switch(action) {
            case 'search':
                const searchText = tableState.searchText;
                // 调用接口逻辑同上
                break;
            case 'changePage':
                // 处理分页逻辑
                break;
            case 'sort':
                // 处理排序逻辑
                break;
            default:
                break;
        }
    }
}

注意：服务端返回的总条数count必须是当前搜索条件匹配的所有数据总条数，否则表格分页会出现计算错误。

内容的提问来源于stack exchange，提问作者Obaid Aqeel