Datatables.net：使用 React Redux 更正服务器端分页

Question

我有一个 react 组件，它使用 redux 向 API 发出请求。此请求执行服务器端分页。

问题是我不明白如何使用 redux 在 datatables.net 中执行此分页。

我确实知道如何在没有数据表的情况下执行分页（实际上，我的组件正在执行它）并且数据表有一个ajax support，作为react-redux-datatable 包。两者都是通过 ajax 直接调用 API，而使用 redux 则不然。

import React, { useEffect, useState, useCallback } from 'react'
import { bindActionCreators } from 'redux'

//...

const [skip, setSkip] = useState(10)
const [page, setPage] = useState(0)

// offset = 0 to page 0, offset 10 to page 1, offset 20 to page 2 and so on
<button onClick={() => props.doList({ offset: page * skip  })}>Request</button>

// Table shows the current 10 entries, from a max that is also 10.
<Table data={props.list} columns={predefinedColums}>

//...

// results are acessed by props.list
const mapStateToProps = (state) => {
    return ({
        list: state.reducer.list,
    })
}

const mapDispatchToProps = dispatch =>
    bindActionCreators(
        {
            doList,
        },
        dispatch
    )

目前，我可以显示所需的结果，但不知道如何在数据表组件中对页面更改执行新调用。分页 API 正在工作，所以如果我手动更改页码，它会返回正确的条目。

//Table component

import React, { useEffect } from 'react'
import $ from 'jquery'
import 'datatables.net'
import 'datatables.net-responsive'
import 'datatables.net-select'

// other imports

function Table(props) {
    const { columns, data, title } = props

    useEffect(() => {
        $('#table_id').DataTable().destroy()
        $('#table_id').DataTable({
            retrieve: true,
            data,
            columns,
            "responsive": true,
            "lengthMenu": [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            "language": {
                "emptyTable": i18n.t('emptyDataSourceMessage'),
                "paginate": {
                    "previous": i18n.t('Previous'),
                    "next": i18n.t('Next'),
                    "first": i18n.t("First"),
                    "last": i18n.t("Last"),
                },
                "infoFiltered": i18n.t("(filtered from _MAX_ total entries)"),
                "search": i18n.t('Search'),
                "info": i18n.t("Showing _START_ to _END_ of _TOTAL_ entries"),
                "infoEmpty": i18n.t("Showing 0 to 0 of 0 entries"),
            },
        })
    }, [columns, data])

    return (
        <div className="row">
            <div className="col s12">
                <div class="section section-data-tables">
                    <div className="card">
                        <div className="card-content">
                            <h4 className="card-title">{title}</h4>
                            <div className="row">
                                <div className="col s12">
                                    <table id="table_id" className="display">
                                        <thead>
                                            <tr>
                                                {columns.map((column, key) => <th key={key} data-field={column.field}>{column.title}</th>)}
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                {columns.map((column, key) => <th key={key} data-field={column.field}>{column.title}</th>)}
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Table

表格看起来像：（显示 10 个结果的 10 和唯一的页面）

我想知道如何使用 redux 正确执行服务器端分页。目前可以知道条目的数量以及要显示的当前页面。

Answer 1

只需切出您想要返回给客户端的部分结果（请参阅下面的第一个代码部分）。 此外，我在进行服务器端分页时所做的是使用唯一 id 缓存请求的结果。这几乎是强制性的，以防止每次用户切换页码或页面大小时多次重新计算搜索。

我要求一些结果如下：

1. 客户端：发送搜索（也可以是类别id）请求。

2. 服务器：将搜索转换为唯一 ID。查看结果是否已经在缓存中。如果否，则计算搜索，放入缓存中，键为唯一 ID。对搜索结果使用常用的数组操作（切片），我只取想要的部分。

ret.productIDs =ret.productIDs.slice(imports.config.pageSizes[req.body.pageSize]*(req.body.pageNum), imports.config.pageSizes[req.body.pageSize]*(req.body.pageNum+1));

1. 服务器：将其与搜索唯一 ID 一起返回（以便下次它可以直接使用此 ID 而不是搜索）。

2. 客户端：显示搜索结果。每当用户更改页面大小或页面编号时，发送此请求：

   {
       searchId, pageNum, pageSizeIndex
   }
   

现在您还可以使用排序索引将其扩展到排序。另外，在服务器上，您可以记录缓存中搜索结果的可用排序。如果用户要求的排序尚未计算，只需对可用排序之一（已计算排序）进行排序，并将其添加到缓存条目的可用排序中（对于此搜索结果）。 所以最终的请求实际上是这样的：

{
    searchId, pageNum, pageSizeIndex, sortingIndex
}