Dynamic Pagination on Large Tables

Topic: Dynamic Pagination on Large Tables

rockycastaneda priority asked 3 years ago

*Expected behavior*Auto pagination and fetch of large tables. I have a table from an API in JSON format that is about 20000 records. Is there a way for mdbVUE to paginate through that in batches of say 5 rows per fetch? and dynamically fetch another 5 every change of page? I do not want the user to wait for it to load the entire 20000 records each time its shows the grid.

*Actual behavior*Unable to find a sample to do this

Resources (screenshots, code snippets etc.)

Mikołaj Smoleński staff commented 3 years ago

In the latest MDB5 Vue Datatable we have a render event that emits on every page change. It can be useful in your case.

Keep coding, Mikołaj from MDB

rockycastaneda priority commented 3 years ago

Any more examples other than what is already available on the docs?

Mikołaj Smoleński staff commented 3 years ago

Here are some more examples: https://mdbootstrap.com/snippets/?search=datatable&top=all

Keep coding, Mikołaj from MDB

launchbrigade priority commented 1 year ago

Did you ever solve this? Im looking to do the same thing with react

Bartosz Cylwik staff commented 1 year ago

Hi launchbrigade, I've seen you already asked our react team about that. Checkout the latest response:

https://mdbootstrap.com/support/react/datatables-dynamic-pagination-and-the-render-listener-in-react/

Add comment

Roman Tikhomirov free answered 9 months ago

0 0 Best answer

this works for me
import React, { useState, useEffect } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import axios from 'axios';

const YourComponent = () => {
 const [data, setData] = useState([]);
 const [totalPages, setTotalPages] = useState(0);
 const [currentPage, setCurrentPage] = useState(1);
 const [itemsPerPage, setItemsPerPage] = useState(5);

useEffect(() => {
 fetchData();
 }, [currentPage, itemsPerPage]);

const columns = [
 // Define your columns here
 ];

const options = {
 paginationSize: 4,
 pageStartIndex: 1,
 sizePerPage: itemsPerPage,
 totalSize: totalPages * itemsPerPage,
 };

return (
 {
 if (type === 'pagination') {
 setCurrentPage(page);
 setItemsPerPage(sizePerPage);
 }
 }}
 />
 );
};

export default YourComponent;

Please insert min. 20 characters.

this works for me import React, { useState, useEffect } from 'react'; import BootstrapTable from 'react-bootstrap-table-next'; import paginationFactory from 'react-bootstrap-table2-paginator'; import axios from 'axios';

const YourComponent = () => { const [data, setData] = useState([]); const [totalPages, setTotalPages] = useState(0); const [currentPage, setCurrentPage] = useState(1); const [itemsPerPage, setItemsPerPage] = useState(5);

useEffect(() => { fetchData(); }, [currentPage, itemsPerPage]);

const columns = [ // Define your columns here ];

const options = { paginationSize: 4, pageStartIndex: 1, sizePerPage: itemsPerPage, totalSize: totalPages * itemsPerPage, };

return ( { if (type === 'pagination') { setCurrentPage(page); setItemsPerPage(sizePerPage); } }} /> ); };

export default YourComponent;

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Vue
MDB Version: MDB4 6.7.2
Device: macbook pro
Browser: chrome
OS: MacOS Catalina v 10.16.7
Provided sample code: No
Provided link: No

rockycastaneda

10Support score
2Questions 0Answers 0Snippets