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 a year ago
Did you ever solve this? Im looking to do the same thing with react
Bartosz Cylwik staff commented a 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/