jquery - Datatables - Keeping selected page number after callback

Jquery - Datatables - Keeping selected page number after callback

To keep the selected page number after a DataTables callback, you can store and retrieve the page number before and after the callback. Here's an example using jQuery DataTables:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DataTables - Keep Selected Page</title> <!-- Include jQuery and DataTables CSS and JS --> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script> <!-- Include your custom JS file --> <script src="scripts.js"></script> </head> <body> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <!-- Add your data here --> </tbody> </table> <!-- Include your custom JS file --> <script src="scripts.js"></script> </body> </html>

JavaScript (scripts.js):

// scripts.js $(document).ready(function() { var table = $('#example').DataTable(); // Store the selected page number var selectedPage = 1; // Event listener for page change $('#example').on('page.dt', function () { // Store the selected page number selectedPage = table.page.info().page + 1; // Add 1 because DataTables uses zero-based indexing }); // Simulate a callback (you can replace this with your actual callback logic) setTimeout(function () { // Restore the selected page after the callback table.page(selectedPage - 1).draw('page'); }, 3000); // Simulated callback delay (replace with actual callback delay) });

In this example:

  • The page.dt event is triggered when the page is changed.
  • The selected page number is stored in the selectedPage variable.
  • A simulated callback is performed (replace this with your actual callback logic).
  • After the callback, the selected page is restored using table.page(selectedPage - 1).draw('page'). Note that DataTables uses zero-based indexing for pages, so we subtract 1 from selectedPage.

Adjust the code based on your DataTable structure and callback logic.

Examples

  1. "Retain current page number after DataTables callback"

    • Description: Preserving the current page number after a DataTables callback.
    // Assuming 'table' is your DataTable instance var currentPage = table.page(); // Get the current page number // Perform DataTables callback table.on('draw', function () { // Return to the previous page after callback table.page(currentPage).draw('page'); });

  2. "Store and restore DataTables state during callbacks"

    • Description: Storing and restoring the DataTables state, including the current page number, during callbacks.
    // Assuming 'table' is your DataTable instance var tableState = table.state(); // Get the current DataTable state // Perform DataTables callback table.on('draw', function () { // Restore DataTable state after callback table.state(tableState); });

  3. "Use cookie to remember DataTables page number after callback"

    • Description: Using a cookie to remember and set the DataTables page number after a callback.
    // Assuming 'table' is your DataTable instance var currentPage = $.cookie('datatable_page'); // Get the stored page number // Perform DataTables callback table.on('draw', function () { // Set the page number after callback table.page(currentPage).draw('page'); });

  4. "Persist page number in URL parameters during DataTables callback"

    • Description: Persisting the DataTables page number in URL parameters and restoring it after a callback.
    // Assuming 'table' is your DataTable instance var currentPage = getUrlParameter('page'); // Get the page number from URL parameter // Perform DataTables callback table.on('draw', function () { // Update URL parameter after callback updateUrlParameter('page', currentPage); }); // Helper function to get URL parameter function getUrlParameter(name) { // Implementation of getting URL parameter } // Helper function to update URL parameter function updateUrlParameter(name, value) { // Implementation of updating URL parameter }

  5. "Use DataTables API to save and restore page state during callback"

    • Description: Utilizing DataTables API methods to save and restore the page state during callbacks.
    // Assuming 'table' is your DataTable instance var state = table.state(); // Save the current DataTable state // Perform DataTables callback table.on('draw', function () { // Restore DataTable state after callback table.state(state); });

  6. "Maintain selected page after DataTables AJAX callback"

    • Description: Maintaining the selected page after an AJAX callback in DataTables.
    // Assuming 'table' is your DataTable instance var currentPage = table.page(); // Get the current page number // Perform DataTables AJAX callback table.on('xhr', function () { // Return to the previous page after AJAX callback table.page(currentPage).draw('page'); });

  7. "Save and restore DataTables page state using sessionStorage"

    • Description: Saving and restoring DataTables page state using the sessionStorage during callbacks.
    // Assuming 'table' is your DataTable instance var currentPage = sessionStorage.getItem('datatable_page'); // Get the stored page number // Perform DataTables callback table.on('draw', function () { // Set the page number after callback table.page(currentPage).draw('page'); });

  8. "Retain DataTables page number after server-side processing callback"

    • Description: Retaining the DataTables page number after a callback with server-side processing.
    // Assuming 'table' is your DataTable instance var currentPage = table.page(); // Get the current page number // Perform DataTables server-side processing callback table.on('xhr', function () { // Return to the previous page after server-side processing callback table.page(currentPage).draw('page'); });

  9. "Use DataTables stateSaveCallback to manage page state"

    • Description: Leveraging DataTables stateSaveCallback to manage and restore the page state during callbacks.
    // Assuming 'table' is your DataTable instance table.stateSaveCallback = function (settings, data) { data.page = table.page.info().page; // Save the current page number }; // Perform DataTables callback table.on('draw', function () { // Restore DataTable state after callback table.state.load(); });

  10. "Remember and set page number using DataTables state events"

    • Description: Remembering and setting the page number using DataTables state events.
    // Assuming 'table' is your DataTable instance var rememberedPage; table.on('stateSaveParams', function (settings, data) { rememberedPage = table.page(); // Remember the current page number }); table.on('draw', function () { // Set the remembered page number after callback table.page(rememberedPage).draw('page'); });

More Tags

httpurlconnection non-printable git-rebase spark-structured-streaming plesk bootstrap-popover m3u8 video-recording disabled-input uiview-hierarchy

More Programming Questions

More Physical chemistry Calculators

More Various Measurements Units Calculators

More Fitness-Health Calculators

More Statistics Calculators