Datatables Plugin Returns Old Data When Cell Is Updated

Question

I have implemented the Datatables plugin for jQuery. I am using the columns.data option to perform operations on my data before it is loaded in the table.

Since I am having an issue when updating the data, I referenced the columns.data option documentation and noticed that when an update occurs, the example sets the row parameter equal to val (which I thought would update the row parameter and thus the underlying data. However, I have found this isn't true.

EDIT: To clarify, the issue seems to be when I am assigning row = val. row and val are both objects when type == 'set'. If I assign each property individually (ex. row.information = val.information), then it works. Is there a reason I can't reassign the object to a new object?

Below is an example that captures what I am trying to do:

var initialData = [{ "information": "Google Link", "weblink": "http://www.google.com" }];

var newDataObj = { "information": "Yahoo Link", "weblink": "http://www.yahoo.com" };

$('#example').DataTable({
   "data": initialData,
   "columns": [
      { "data": "information" }, 
      { 
         "data": function(row, type, val, meta){
            if(type === 'set'){
             row = val; //ASSIGNING AN OBJECT TO AN OBJECT
              return;
             }
             
             data = '<a href="' + row.weblink + '">' + row.information + '</a>';
             
             return data;
         }
      } 
   ]
});

$('#update_link').on('click', function (){
 
 var table = $('#example').DataTable();
 table.cell(0,1).data(newDataObj).draw();
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
</head>
<body>
<table class="display" id="example">
    <thead>
        <tr>
            <th>Information</th>
            <th>Link</th>
        </tr>
    </thead>
</table>

<div>
  <button id="update_link">Update Link</button>
</div>
</body>
</html>

larrylampco · Accepted Answer · 2017-08-29T19:14:31.593

I figured out that simply assigning the object row to a new object val does NOT change the original object that was passed into the columns.data function. I have to instead "change the INTERNALS of the parameter" and those changes will propagate back to the original object. More information can be found here:

Is JavaScript a pass-by-reference or pass-by-value language?

The reason for this is because objects in javascript ARE in fact passed by value BUT the value that is passed is a reference (pass-by-reference-by-value).

Assigning to each internal parameter fixes the issue.

...
row.information = val.information;
row.weblink = val.weblink; 
...

So it looks like I didn't fully understand call-by-sharing.

var initialData = [{ "information": "Google Link", "weblink": "http://www.google.com" }];

var newDataObj = { "information": "Yahoo Link", "weblink": "http://www.yahoo.com" };

$('#example').DataTable({
   "data": initialData,
   "columns": [
      { "data": "information" }, 
      { 
         "data": function(row, type, val, meta){
            if(type === 'set'){
             row.information = val.information; //debugger;
                row.weblink = val.weblink;
              return;
             }
             
             data = '<a href="' + row.weblink + '">' + row.information + '</a>';
             
             return data;
         }
      } 
   ]
});

$('#update_link').on('click', function (){
 
 var table = $('#example').DataTable();
 table.cell(0,1).data(newDataObj).draw();
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
</head>
<body>
<table class="display" id="example">
    <thead>
        <tr>
            <th>Information</th>
            <th>Link</th>
        </tr>
    </thead>
</table>

<div>
  <button id="update_link">Update Link</button>
</div>
</body>
</html>

Datatables Plugin Returns Old Data When Cell Is Updated

1 Answers1