Correct serverside pagination with React Redux

lfernandosilva32

I have a react component that makes a request to an API using redux. This request performs a server-side pagination.

The problem is I don't understand how to perform this pagination in datatables.net using redux.

I do know how to perform a pagination without datatables (actually, my component is performing it) and datatables has a ajax support, as the react-redux-datatable package. Both perform directs call to API through ajax, that is not the case of using 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
    )

Currently, I can show the desired results, but don't know how to perform new calls on page change in the datatable component. The pagination API is working, so if I change manually the page number, it returns the correct entries.

//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

The table looks like: (showing 10 results of 10 and only page)

I would like to know how to perform a server side pagination correctly with redux. Is currently possible to know the number of entries and also the current page to be displayed. Also asked in Stack Overflow

allan

The key to server-side processing is the client / server data interchange that DataTables uses. You can use the ajax parameter as a function to override the default Ajax call that DataTables makes (through jQuery), which you would want to do in this case to pass the request on to Redux. It does mean you'd need to implement sort and search in Redux (or around it) is the disadvantage here, since normally DataTables would do all that for you, but can't if it doesn't have all of the data.

Allan