jQuery DataTables duplicates are initially loading

Question

So, adding on to my question from yesterday: jQuery AJAX call function on timeout

Using the first answer from the post from yesterday, the table does indeed reload without refreshing the whole page. It does so after 30 seconds.

But my problem lies before the first refresh...

The page loads, and the records are duplicated. But after the first refresh and every refresh after (unless I manually refresh using F5), everything is fine. No duplicates.

I'm trying to figure out why there are duplicates and how to remove the duplicates upon the page's initial ready event.

Here is the code, starting with the ready event:

 $(document).ready(function()
 {
   $.ajax({
     url:'api/qnams_all.php',
     type:"GET",
     dataType:"json"
   }).done(function(response) {
     console.log(response.data);
     renderDataTable(response.data)
   }).fail(function() {
     alert( "error" ); 
   }).always(function() {
     alert( "complete" );
   });
 });

Here is the function to load the DataTable:

 function renderDataTable(data)
 {
   var $dataTable = $('#example1').DataTable({
     "ajax": 'api/qnams_all.php',  // just added this
     "data": data,
     "bDestroy": true,
     "stateSave": true
   });

 // then I add the reload function

   setInterval( function () {
     $dataTable.ajax.reload();
   }, 30000 );

 });

As stated above, the setInterval function works like how it should. It's just the initial page load is duplicating all of the records.

Does anyone see why and how to fix it?

Set a Variable for your data records and on each interval set the variable as "". (blank) — Cam
– Cam, Commented May 27, 2016 at 16:41
Pardon, ignore that, use .empty() on the div to clear the data table. Or once its loaded clear the setInterval (unless your checking for new data) — Cam
– Cam, Commented May 27, 2016 at 16:43
Would you be able to provide me some sample code of what that would look like? Please forgive my ignorance regarding this matter. I do appreciate your help. — John Beasley
– John Beasley, Commented May 27, 2016 at 16:49
Please use uppercase only for those items which must be uppercase (like HTML). jQuery is spelled with a single uppercase letter, and DataTables only has two. For a lot of people, using all uppercase is analogous to shouting. — Heretic Monkey
– Heretic Monkey, Commented Jul 8, 2016 at 19:34

IMTheNachoMan · Accepted Answer · 2016-05-27 16:51:11Z

1

I think you've got some duplication going on. You don't need to load the ajax flie and then load it again when you set up the DataTable.

Try replacing all of your code with this:

$(document).ready(function() {
  // load and render the data
  var $dataTable = $('#example1').DataTable({
    "ajax": 'api/qnams_all.php', // just added this
    "data": data,
    "bDestroy": true,
    "stateSave": true,
    // the init function is called when the data table has finished loading/drawing
    "init": function() {
      // now that the initial data has loaded we can start the timer to do the refresh
      setInterval(function() {
        $dataTable.ajax.reload();
      }, 30000);

    }
  });
});

answered May 27, 2016 at 16:51

IMTheNachoMan

5,9336 gold badges61 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

John Beasley Over a year ago

So utilizing your code, I could get rid of the renderDataTable function and just put everything inside the READY event?

IMTheNachoMan Over a year ago

Yes, I thikn so. I don't know anything about DataTables but from what I'm reading it should work.

John Beasley Over a year ago

I will give it a shot. I will let you know.

John Beasley Over a year ago

No luck. Console doesn't recognize "data": data

IMTheNachoMan Over a year ago

I don't think you need "data": data since you're using "ajax": 'api/qnams_all.php'.

|

Manoj Shekhawat · Accepted Answer · 2018-01-17 05:18:30Z

Calling clear prevents duplicate rows while loading data into table:

$("#checkResourcesButton").click(function() {
        $.post("./get/resources", {
            featureName: $('#myvar').val()
        }).done(function (data) {
            var table = $('#table-output').DataTable();
            table.clear();
            var json = JSON.parse(data);

            for (var row in json) {
                var nameVal = json[row].Name;
                var emailVal = json[row].emailId;
                var roleVal = json[row].role;
                var startDateVal = json[row].startDate;
                var endDateVal = json[row].endDate;
                var toAdd =
                    {
                        name: String(nameVal),
                        emailId: String(emailVal),
                        role: String(roleVal),
                        startDate: String(startDateVal),
                        endDate: String(endDateVal)
                    };
                table.row.add(toAdd);
            }

            table.draw();
        });
    });

Collectives™ on Stack Overflow

jQuery DataTables duplicates are initially loading

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related