自定义分页和过滤在反应 js 中不起作用

Posted 2023-02-22

【中文标题】自定义分页和过滤在反应 js 中不起作用

【英文标题】：custom pagination and filtering not working in react js

【发布时间】：2020-05-06 06:09:02

【问题描述】：

我想用 api 进行分页，当我用 NO 过滤时，当我想转到该过滤器中的下一页时，它重定向到默认过滤器，下面是我的代码 我想用 api 进行分页，当我用 NO 过滤时，当我想转到该过滤器中的下一页时，它会重定向到默认过滤器，下面是我的代码

        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_URLmessages?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】：

首先你没有使用 page 在你选择 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 的位置。但请记住，您必须使用 searchText、过滤条件和 pageNo、rowsPerPage 等页面信息存储正确的 tableState。