Блог

Привет, я внедрил mui-datatable в свой проект. Все работает хорошо, но панель поиска не работает, когда я включаю значение на стороне сервера: 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} />
 

Подробнее