пользовательские нумерация страниц и фильтра не работают в реакции js - PullRequest
Новая
       85

пользовательские нумерация страниц и фильтра не работают в реакции js

0 голосов
/ 20 января 2020

Я хочу сделать разбиение на страницы с API, когда я фильтрую с NO, и когда я хочу go, чтобы перейти на следующую страницу в этом фильтре, его перенаправление на фильтр по умолчанию, ниже мой код, я хочу сделать разбиение на страницы с API, когда я фильтрую с NO, и когда я хочу go перейти к следующей странице в этом фильтре и перенаправить на фильтр по умолчанию, ниже мой код 

        try {

                let val = (typeof status[0] == "undefined" ? '' : status[0]);
                if(val.toLowerCase() === 'yes'){
                    val = false;
                } else {
                    val = true;
                }

                let res = await axios(`${process.env.REACT_APP_API_URL}messages?page=${page}&limit=10&limit=10&status=${val}`, {
                    headers: {
                        "x-access-token": cookies.get("token"),
                        "Content-Type": "application/json",
                    },
                });

                console.log(res,'test')
                setData({ tableData: res.data.messages, isFetching: false });
                setCurrentPage(res.data.currentpage);


        } catch (err) {
            console.log("############");
        }
    };
  let opt = {
        selectableRows: "none",
        responsive: "scrollFullHeight",
        serverSide: true,
        count: count,
        onTableChange: (action, tableState) => {
            // a developer could react to change on an action basis or
            // examine the state as a whole and do whatever they want

            switch (action) {
                case "changePage":
                    fetchData1(tableState.page,tableState.rowsPerPage);
                    break;
                case "filterChange":
                    fetchData1(tableState.page,tableState.rowsPerPage,tableState.filterList[4]);
                    break;

            }
        }
    }

 <React.Fragment>
            {data.isFetching ? (
                <div className={classes.progressBarCont}>
                    <CircularProgress color="secondary" />
                </div>
            ) : (
                <React.Fragment>
                    <PageTitle title="List Of Messages" />
                    <Grid container spacing={3}>
                        <Grid item xs={12}>
                            <MUIDataTable
                                title="Messages List"
                                data={messageArr}
                                columns={[
                                    {
                                        name: "room",
                                        label: "Room",
                                        options: {
                                            filter: true,
                                            sort: true,
                                        },
                                    },
                                    {
                                        name: "sender",
                                        label: "Sender",
                                        options: {
                                            filter: false,
                                        },
                                    },
                                    {
                                        name: "message",
                                        label: "Message",
                                        options: {
                                            filter: false,
                                        },
                                    },
                                    {
                                        name: "sender",
                                        label: "Sender",
                                        options: {
                                            filter: false,
                                        },
                                    },
                                    {
                                        name: 'unanswered',
                                        label: 'Status',
                                        options: {
                                            filterType: 'dropdown',
                                            customFilterListRender: value => `Status: ${value}`,
                                            filterOptions: {
                                                names: ["No","Yes"],
                                                logic(unanswered, filters) {

                                                }
                                            },
                                        },
                                    },
                                ]}
                                options={opt}
                            />
                        </Grid>
                    </Grid>
                </React.Fragment>
            )}
            <ToastContainer />
        </React.Fragment> ```

1 Ответ

0 голосов
/ 30 марта 2020

Сначала вы не использовали страницу , указав json для пейджинга. Вы должны использовать страницу как: 

let opt = {
    selectableRows: "none",
    responsive: "scrollFullHeight",
    serverSide: true,
    count: count,
    page: page,
    onTableChange: (action, tableState) => {
            switch (action) {
                case "changePage":
                case "changeRowsPerPage":
                    changePage(tableState);
                    break;
                case "search":
                    search(tableState);
                    break;
            }
        },

Затем вы должны написать две функции changePage и искать, где вы должны вызывать ваш API. но имейте в виду, что вы должны хранить правильное tableState, используя searchText, критерии фильтрации и информацию о странице, такую ​​как pageNo, rowPerPage и т. д.

...