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

Swiper: What methods can be used to classify the nature of an event?

Currently, I am utilizing Swiper for React in my project. I find myself in need of implementing a different effect when the user swipes versus using buttons to switch between active slides. Upon examining the swipe object for pertinent details regarding ...

javascriptreactjsswiper.js

Adjust the node_modules path tailored to your project

My current project structure looks like this: |-app |-... |-libs |- package.json |- index.html I am interested in organizing my project such that the 'node_modules' folder is inside the 'libs' folder. The desired structure is as fo ...

javascriptnode.jsnpm

Emulating a mouse click in jQuery/JavaScript on a webpage link

I am seeking a way to programmatically trigger a click on any link within a webpage using JavaScript. The challenge lies in ensuring that if the link has an 'onclick' event bound to it by another unknown JavaScript function, that event is trigger ...

javascriptjqueryonclick

Creating a Robust Next.js Build with Tailor-Made Server (Nest.js)

I'm in need of assistance with compiling/building my project using Next.js while utilizing a custom server. Currently, I have integrated Nest.js (a TypeScript Node.js Framework) as the backend and nested Next.js within it. The integration seems to be ...

javascriptreactjstypescriptnext.jsnestjs

Using jqgrid to generate a hyperlink that corresponds to the data's value

I am working with a grid setup similar to the one below: $("#list").jqGrid({ url:'listOpenQueryInXML.php', datatype: 'xml', colNames:['Id','name1', 'name2', 'status', 'type' ...

javascriptjqueryjsonjqgrid

Is there a way to dynamically pass values to a form in React?

Learning React on my own has been challenging, especially when trying to accomplish what I thought would be a simple task. To put it briefly, I have a menu with several items. I aim to select a menu item and have a form open next to it. The form shoul ...

javascriptreactjsmaterial-ui

Issue with React hook state persistence in recursive function

I implemented a recursion custom hook that utilizes a setTimeout function to provide 3 chances for an operation. Once the chances run out, the recursion should stop. However, I encountered an issue where the setTimeout function is not properly decrementin ...

javascriptreactjsreact-hooksclosures

Retrieving a result from a function call is a fundamental aspect of programming

I have a scenario where I am initiating a call from a controller within AngularJS. This call passes some data to a service in order to receive a response that needs to be conditionally checked. Controller patents.forEach(function(item){ // The "patents" ...

javascriptangularjs

Converting MySQL data to JSON format in PHP, including handling nested objects

Hey there, I'm currently working on organizing these results into arrays in PHP so that I can convert them into JSON objects and send them over to the client. Here is what the query results look like: id name hours cat status 3bf JFK Int 24 ...

phpjavascriptmysqljsonrest

Tips for aligning text in MUI Breadcrumbs

I am currently utilizing MUI Breadcrumb within my code and I am seeking a solution to center the content within the Breadcrumb. Below is the code snippet that I have attempted: https://i.stack.imgur.com/7zb1H.png <BreadcrumbStyle style={{marginTop:30}} ...

javascriptcssreactjsmaterial-ui

When using Websocket, an error message stating "Invalid frame header" will be triggered if a close message of 130 or more characters is sent

I am utilizing the ws node.js module along with html5's WebSocket. The Websocket connection is established when a user triggers an import action, and it terminates once the import is completed successfully or encounters an error. At times, the error ...

javascriptnode.jshtmlwebsocket

Utilizing Regular Expressions in Sails.js Routing

Currently, I am working on a sails.js project and utilizing backbone for the front end. My goal is to have a single route leading to the index page where my backbone application is hosted. '/*': { view: 'home/index' } This setup ...

javascriptnode.jsbackbone.jssails.js

Concealed Selenium File Upload through Drag and Drop User Interface

Struggling to insert an image into the specified input using selenium web-driver. <input type="file" multiple="multiple" class="dz-hidden-input" accept="image/gif,image/jpg,image/jpeg,image/png,application/zip" style="visibility: hidden; position: abso ...

javascriptselenium-webdriver

Need help with decoding XML namespaces?

How can I use JavaScript/Ajax to parse values from the following XML snippet? <yweather:astronomy sunrise="6:34 am" sunset="8:38 pm"/> I've been attempting to retrieve the sunrise attribute with no success using this code: var response = tran ...

javascriptxmlajaxnamespaces

I need to update a JSON file on the server by adding a new object to the existing array using the fs.appendFile function

I have a JSON stored on the server like this: [{"a":1}, {"a":2}] and I'm wondering if there is a way to add an object at the end without having to rewrite the entire file on the server. As a workaround, I have been omitting the brackets and adding the ...

javascriptnode.jsjson

Looking to alter the CSS of an ID element when hovering over a link on your website?

Irrespective of the positioning of the links in the html, a simple hover effect can trigger changes like switching images or altering backgrounds anywhere on the website. The ideal solution would involve a straightforward method without the need for Javas ...

javascripthtmlcss

This as well as its parent node

I am looking to implement a function where an element is manipulated if a child of it is clicked (by adding a CSS class to it). My current approach is as follows: function mahlzeitRaus() { console.log("Out"); //this.className += " not"; this. ...

javascript

Tips for updating a column with just one button in AngularJS

On my list page, there is an Unapproved button. I am new to angular and struggling to figure out how to retrieve the post's id and update the corresponding column in the database to mark it as approved. Can someone provide guidance on how to accomplis ...

javascriptsqlformsangularjssql-update

Obtain the PHP function output through asynchronous JavaScript and XML programming

I have a form that collects user input and saves it to the database. After submitting the form, an ajax call is made to the action.php file. e.preventDefault(); $.ajax({ type: "POST", url: "action.php", data: senData, dataType: "JSON", ...

javascriptphphtmlajaxforms

Clicking on the ActionButton will trigger the sending of an HTTP Request in this Firefox

Seeking guidance: As I develop an addon, my objective is to initiate a HTTP request upon clicking the ActionButton. The data to be sent to the server includes the URL of the tab and the content of the page. Initially, I attempted to create a log message a ...

javascriptajaxfirefoxfirefox-addonfirefox-addon-sdk