CODEWITHSUNDEEP
javascriptindexingdatatables
Marta Fernandez
Marta Fernandez

Reputation: 43

Difference between node.innerHTML and cell.data() in DataTables

Link to test case: http://live.datatables.net/yevonevo/1/edit?html,js,output
Link to documentation tutorial: https://datatables.net/examples/api/counter_columns.html

Goal: Creating a index column that behaves as a "ranking" column, right after initialization, so it assigns fixed indexes to rows that will be preserved when re-ordering the table according to other columns.

I am playing around and I have come up with 2 different ways that behave slightly different:

  1. Setting data property of cell:
$('#example').on('init.dt', function() {
  console.log('init');
  let i = 1;
  $('#example').DataTable().cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
    this.data(i++);
    });
});
var table = $('#example').DataTable({
    pageLength: 5,
    order: [[1,'asc']]
});
  1. Setting innerHTML of node:
$('#example').on('init.dt', function() {
   $('#example').DataTable().column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
       cell.innerHTML = i+1;
       });
});
var table = $('#example').DataTable({
    pageLength: 5,
    order: [[1,'asc']]
  });

Both create the indexes perfectly, but while I am able to manually re-order the table based on the first column ranking values using the first solution, I cannot use that column to re-order using the second option (with manually I mean after having created the table and clicking on sortin arrows).

Why does that happen?

Upvotes: 2

Views: 411

Answers (1)

andrewJames
andrewJames

Reputation: 22012

When you make a change directly to a node in the DOM (a change to the table HTML)...

cell.innerHTML = i+1;

...then you are using a web API, not a DataTables function.

That change is not visible to DataTables (the underlying JavaScript data structure), unless you tell DataTables about that change. If DataTables re-draws the table it will use its internal data - and any DOM changes in the HTML table will be discarded.

The data you see when you look at the web page may not be the data which DataTables has stored.

Contrast that with a DataTables API function such as:

cell().data( value )

...which updates the underlying DataTable data. Now, when a re-draw of the table happens (explicitly or implicitly), you get to see that data.

DataTables assigns a zero-based internal row ID when it is initialized - based on the order in which rows were loaded from whatever source you are using. You can make that internal ID visible if you want:

"render": function ( data, type, row, meta ) {
  return meta.row + 1;
}

See columns.render

An example:

$(document).ready(function() {
var table = $('#example').DataTable( {

  "columnDefs": [ {
    "targets": 0,
    //"data": "",
    "render": function ( data, type, row, meta ) {
      return meta.row + 1;
    }
  } ]

} );
} );
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Index</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td></td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td></td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td></td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td></td>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td></td>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td></td>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td></td>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td></td>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
        </tbody>
    </table>

</div>



</body>
</html>

Upvotes: 1

Related Questions