Topic: Dynamic Pagination on Large Tables
*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.)
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 fetchData = async () => {
try {
const response = await axios.get(/api/data?page=${currentPage}&size=${itemsPerPage});
setData(response.data.data); // Assuming data is the key containing your records
setTotalPages(response.data.totalPages);
} catch (error) {
console.error('Error fetching data:', error);
}
};
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;
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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
Mikołaj Smoleński staff commented 3 years ago
In the latest MDB5 Vue Datatable we have a
renderevent that emits on every page change. It can be useful in your case.Keep coding, Mikołaj from MDB
rockycastaneda pro premium 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 pro premium priority commented 10 months ago
Did you ever solve this? Im looking to do the same thing with react
Bartosz Cylwik staff commented 10 months 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/