Ручная сортировка и фильтрация разбивки на страницы в Antd Table React - PullRequest
Новая
       68

Ручная сортировка и фильтрация разбивки на страницы в Antd Table React

0 голосов
/ 05 октября 2019

Я хочу обрабатывать сортировку, фильтрацию и разбиение на страницы на стороне сервера отдельно в моей таблице antd. Поэтому при изменении нумерации страниц не следует вызывать функцию сортировки и фильтрации. аналогично для сортировки и фильтрации. В документации antd для Table они использовали свойство onChange, которое будет вызываться при изменении сортировки, фильтрации или разбивки на страницы. https://ant.design/components/table/#components-table-demo-ajax

Чтобы справиться с нумерацией страниц, я использовал опцию PAGINING onChange. Но здесь при изменении нумерации страниц вызывается функция сортировки и фильтрации, а при изменении сортировки и фильтрации вызывается функция разбиения на страницы.

Я не уверен, как добиться этой функциональности. Может кто-нибудь, пожалуйста, помогите мне с этим.

Пример кода antd для таблицы 

const handlePagination = page => {
    //This should be called only when pagination changes
    dispatch(PaginateData(page));
};

const handleSortFilter= params=> {
    //This should be called only when pagination or sorting is called.
    dispatch(SortFilterData(params));
};

<Table
    rowSelection={rowSelection}
    onChange={handleSortFilter}
    rowKey={record => record.id}
    columns={columns}
    dataSource={data}
    loading={tableActionInProgress}
    pagination={{
        onChange: handlePagination,
        pageSize: dataPerPage,
        total: CountData
    }}
/>

Обновление В документации таблицы antd для запросов ajax (https://ant.design/components/table/#components-table-demo-ajax) Я мог видеть, что всякий раз, когда мы меняем сортировку или фильтруем, она изменяет страницу обратно на 1. Нужно ли что-то менять в коде, чтобы при изменении фильтра или сортировки для параметра страницы не устанавливалось значение 1.

Почему мне нужно это сделать, потому что, когда пользователь меняет фильтр или сортировку на определенной странице, он не должен вместо этого возвращать его на первую страницу, если я получаю, на какой странице (номер страницы) пользователь пытался отфильтроватьили сортировать, чтобы я мог отправить номер страницы в запросе и отфильтровать / отсортировать соответственно странице в серверной части и отправить ответ обратно. Есть ли возможность не возвращать страницу обратно в 1, если сортировка или фильтрация применяются ктаблица antd.

1 Ответ

0 голосов
/ 08 октября 2019

Для управления фильтрами, сортировкой и разбиением на страницы в бэкэнде необходимо управлять состоянием таблицы в handleChange: 

<Table
    columns={[
      //...
    ]}
    rowKey="key"
    dataSource={youSource}
    onChange={this.handleTableChange}
    pagination={{
       total: totalCount // total count returned from backend
    }}
/>

handleTableChange = (pagination, filters, sorter) => {

    this.getData(
        (pagination.current * pagination.pageSize) - pagination.pageSize,
        pagination.pageSize,
        {
            order: sorter.hasOwnProperty('column') ? sorter : false
        }
    )

}

Получение данных из API: 

getData = (offset, limit, params = false) => {

    fetch(apiURL + '/you/endpoint/?offset=' + offset + '&limit=' + limit + ( params && params.order ? '&order=' + JSON.stringify(params.order) : '' ), {
            method: 'GET' // || POST
        }).then((r) => {

            // parse response
            const contentType = r.headers.get("content-type");
            if (contentType && contentType.indexOf("application/json") !== -1) {

                return r.json().then(data => ({status: r.status, body: data}));

            } else {

                return r.text().then(text => ({status: r.status, body: text}));

            }

        }).then((res) => {

            // get result 
            console.log('Result: ',res.body)

        }).catch((err) =>  {

            // handle error
            console.log(err)

        });
}

Вы уже решаете, как получать данные, или если у вас есть возможность реализовать логику бэкэнда, реализовать запрос с параметрами из GET.

...