Hi , I am facing a pagination issue in datatable,so I am using a custom pagination that I am having

Hi , I am facing a pagination issue in datatable,so I am using a custom pagination that I am having

ayushihemlataayushihemlata Posts: 2Questions: 1Answers: 0

// Function to initialize DataTable
function initializeDataTable(data) {
if (dataTable) {
dataTable.destroy();
}

dataTable = $('#myDataTable').DataTable({
    data: data,
    columns: [
        { data: 'logTime' },
        { data: 'trackingId' },
        // Add more column definitions for other properties
    ]
    // Add DataTable options here
});

// Log a message for debugging
console.log('DataTable initialized with data:', data);

}

// Function to fetch data from the HTML table based on the clicked page
function fetchDataForCurrentPage(pageNumber, pageSize) {
// Simulate a delay with setTimeout
setTimeout(function () {
// Fetch data from the HTML table
var dataFromTable = [];
$('#myDataTable tbody tr').slice(startIndex, startIndex + pageSize).each(function(index, element) {
const logTime = $(element).find('td:first-child').text();
const trackingId = $(element).find('td:eq(1)').text();
// Adjust other column selections as needed

        // Add data to the array
        dataFromTable.push({
            logTime: logTime,
            trackingId: trackingId,
            // Add other properties
        });
    });

    // Call the function to initialize DataTable with the fetched data
    initializeDataTable(dataFromTable);

    // Log a message for debugging
    console.log('Fetching data for page:', pageNumber);
}, 2000); // Adjust the duration as needed

}

// Event listener for the page links
$('.pagination-link').on('click', function() {
// Extract the page number from the link, adjust as needed based on your HTML structure
var pageNumber = $(this).text();

// Assuming a page size of 20 records
var pageSize = 20;

// Call the function to fetch data for the clicked page
fetchDataForCurrentPage(pageNumber, pageSize);

});

// Initialize DataTable on document ready
$(document).ready(function() {
// Initial data can be an empty array or any placeholder
initializeDataTable([]);
});

I am already using this king of logic so can you tell me here

Answers

  • ayushihemlataayushihemlata Posts: 2Questions: 1Answers: 0

    My issue is like above thing is working for pages having less difference like if we want to go from page 1, to page 10 or 12but if this difference increases then it is not working suppose from 2 nd page I have to go to last page that is page number 44727 then html table is taking a huge amount to load the data due to which the correct data is not getting converted into jQuery datatable

Sign In or Register to comment.