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:

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:

Roman Tikhomirov free answered 5 months ago

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(; // Assuming data is the key containing your records setTotalPages(; } 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;

Please insert min. 20 characters.


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



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