Automated pagination integrated with automatic refreshing of div every few seconds

I am currently working on setting up a datatable and I need it to be displayed on the monitor in such a way that it can refresh the div and automatically paginate to the next page. However, whenever the div is refreshed, the auto-pagination gets cancelled and goes back to the first page. Any assistance would be greatly appreciated.

    <script type="text/javascript"> 
        $(document).ready(function() {
            var table = $('.data').DataTable({
                "searching": false,
                "info": false,
                "lengthChange": false
            });
            setInterval(function(){ 
            var info = table.page.info();
            var pageNum = (info.page < info.pages) ? info.page + 1 : 1;
            table.page(pageNum).draw(false);    
            }, 5000);  
        });

        $(document).ready(function() {
            setInterval(function () {
                $('#test').load(window.location.href + ' #test');
            }, 3000);
        });

    </script>
javascriptdatatablescodeigniter-3

Answer №1

One technique to refresh the Datatable is to reinitialize it by following these steps:

$(document).ready(function() {
  initDataTable();
  setInterval(function() {
    $('#test').load(window.location.href + ' #test', initDataTable);
  }, 3000);
});

function initDataTable() {  
  var table = $('.data').DataTable({
    "searching": false,
    "info": false,
    "lengthChange": false
  });
  setInterval(function() {
    var info = table.page.info();
    var pageNum = (info.page < info.pages) ? info.page + 1 : 1;
    table.page(pageNum).draw(false);
  }, 5000);
}

UPDATE

Utilize a global variable for managing page number

var info;
var pageNum = 1;
var pageInterval;

$(document).ready(function() {
  initDataTable();
  setInterval(function() {
    $('#test').load(window.location.href + ' #test', initDataTable);
  }, 3000);
});

function initDataTable() {
  clearInterval(pageInterval)
  var table = $('.data').DataTable({
    "searching": false,
    "info": false,
    "lengthChange": false
  });
  pageInterval = setInterval(function() {
    info = table.page.info();
    pageNum = (pageNum + 1) % info.pages
    table.page(pageNum).draw(false);
  }, 5000);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to assign a value in an HTML element using AngularJS

Currently, I am utilizing Angular JS to iterate through a portion of a scope that is initially a JSON array. My objective is to verify the existence of a specific value in that array. If the value exists, then certain actions should be taken. The code bel ...

javascriptangularjsangularjs-ng-repeatangular-ng-if

Adjusting the background hue of the 'td' element within an ajax request

When I press a button, an ajax call is triggered below. In this call, I append 'td' elements with values to a table. Specifically, on the line ''</td><td>' + result[i].preRiskCategory +', I am attempting to change ...

javascriptjqueryajax

Dropdown selection returning the text value instead of the designated value

Is it possible to retrieve the text "Region 1" instead of just the value '1' from a dropdown menu in PHP? <select name = 'region' id = 'region'> <option value = '1'>Region 1</option> <select&g ...

javascriptphphtml

Attempting to compare the HTML datetime with the current time in order to implement conditional formatting

I am working with a SharePoint discussion list that includes a field named "Last Updated." My goal is to identify and highlight rows where the last update was more than 1 hour ago. Here is my current approach: <html> <head> <sc ...

javascriptjquerysharepointjquery-selectors

Encountered an Error with My Protractor Script - Object Expected

Currently, I am in the process of learning automation testing for an AngularJS application. However, I have encountered an "object expected" error on line 4, which is pointing to the first line of my script. describe("Homepage", function() { it("Navig ...

javascriptautomationprotractor

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

javascriptcssreactjsmaterial-ui

Issue with TypeScript in Vue3: Unable to access computed property from another computed property

In my Vue3 project with TypeScript, I am encountering an issue where I am unable to access the properties of the returned JavaScript object from one computed property in another computed property using dot notation or named indexing. For instance, when tr ...

javascripttypescriptvue.jsvuejs3

Limiting the size of image uploads in AWS S3

Currently, I am attempting to go through the steps outlined in this repo, which involves utilizing nextjs and AWS S3 for image uploading. However, one thing that is puzzling me is the limitation of 1MB on image sizes. I'm curious as to why this restri ...

javascriptamazon-web-servicesamazon-s3next.js

Why does this switch case statement fail to effectively replace the elements of the text in order to unravel this JavaScript problem?

Question I need help converting special characters to HTML entities in a string: &, <, >, " (double quote), and ' (apostrophe). My Code function convertHTML(str) { let tempArr = ['a']; let newArr = []; let regex ...

javascriptalgorithmswitch-statement

Deleting all JSON files in a directory using NodeJs

Is there a way to delete only the json files within a directory (multiple levels) without specifying each file name individually? I thought fs-unlinkSync(path) might work, but I haven't found that solution yet. I attempted to use the following method ...

javascriptnode.jsfileexpresspath

Enhance the efficiency of traversing a lengthy list of comparisons within an array.filter method

I am struggling with finding an efficient method to filter out items from an array of objects based on two specific attributes matching those of the last 6 items of another array. Currently, I have a manual process in place which results in cumbersome and ...

javascriptarraysfunctional-programmingjavascript-objects

The deployment on heroku encountered an error during the build process

I'm attempting to deploy my React application on Heroku, but I keep encountering the following errors: -----> Installing dependencies Installing node modules npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ...

javascriptreactjsnpmherokubuild

Toggle between different socket.io servers for seamless connectivity

I'm looking for help with a situation where I need a socket.io client to connect to server A, disconnect, and then connect to server B. Any ideas on how I can achieve this? Thanks in advance! UPDATE: Attached below is the code snippet that's gi ...

javascriptnode.jssocket.io

How does reactjs distinguish between render and return?

I am a beginner in the world of JavaScript. I often come across the terms "return" and "render" in various contexts, but I'm curious about their differences. ...

javascriptreactjs

Having issues with the POST method in node.js and express when connecting to a MySQL database

My GET method is functioning perfectly I have a database called stage4 and I am attempting to insert values into it from a frontend page The connection is established, I'm using Postman to test it first, but it keeps returning a "404 error" which is ...

javascriptmysqlnode.jsapiexpress

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents. I encountered this issue w ...

javascriptcssreactjsmaterial-ui

Transforming a string into an object

I've been working on this code where my aim is to convert a string into an object and then display the data from an ajax call. However, it appears that using the string value in this way is not functioning as expected. var string = "first: 'Geor ...

javascriptjqueryajaxstringobject

Retrieve the parseJSON method using a string identifier

I am trying to serialize a C# const class into name-value pairs, which I need to access by their string names on the client side. For example: return $.parseJSON(constantClass).property; This approach is not working as expected. Is there any alternative ...

javascriptjqueryjson

Guide to successfully navigating to a webpage using page.link when the link does not have an id, but is designated by a

This is my current code snippet: async function main(){ for(int=0;int<50;int++){ const allLinks = await getLinks(); //console.log(allLinks); const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPa ...

javascripthtmlnode.jsasync-awaitpuppeteer

Utilizing Promises with Multiple .then() in JavaScript

I'm currently in the process of creating an array structure. In this structure, we have different parts and each part contains articles. What I've done is create a promise to gather all the parts using .then(), then I need to iterate through eac ...

javascriptnode.jsexpress