jquery - Get the text of a specific column from the previous row of a datatable

Question

I display a datatable and I want to know the value (which is also the text) of the previous row of the 1st column. If it is the same I want to make a return ''; and not display it instead of displaying the text.

     var table = $('<table class="display" id="ecolePubArchTable" width="100%"/>');

"ajax": {
                    "url": "/Publicite/ChargerListePubArchEcole?EcoleCode=" + rowData.ecoleCode + "",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    {
                        data: null,
                        title: "Titre de la formation",
                        class: "progNomClass",
                        data: null,
                    title: "Titre de la formation",
                    class: "progNomClass",
                    render: function (data, type, row, meta) {
                        //var selector_modifier = { order: 'current', page: 'current', search: 'applied' }
                        var textRow = "";
                        var tbl = $("#ecolePubArchTable").DataTable();
                        var previous = '';
                        var schoolNodes = tbl.column(0).nodes();
                        var schoolData = tbl.column(0).data();
                        for (var i = 0; i < schoolData.length; i++) {
                            var current = schoolData[i];
                            console.log(i + ' ' + current);
                            if (current === previous) {
                                textRow = '';
                            } else {
                                textRow = current + ' (' + row.prog_code + ')';
                            }
                            return '' + textRow + '';
                            //previous = current;
                        }

                    }
                       
                    }
                }

question from:https://stackoverflow.com/questions/66051807/get-the-text-of-a-specific-column-from-the-previous-row-of-a-datatable

Answer 1

Here is one approach, which iterates over the following items:

• the HTML table nodes in a specific column
• the equivalent DataTable cell values for the same column

The code uses the cell values from the underlying DataTable object to see when a value changes. It then uses that information to change the related HTML table node value (what you see displayed in the HTML).

So, whereas the underlying DataTable values are never changed, the HTML values are adjusted.

Also, we use a selector modifier, which instructs the tbl.column() function how to handle sorted and filtered data. Basically, we only operate on the data which is visible to the user.

function processColumnNodes(tbl) {
  // see https://datatables.net/reference/type/selector-modifier
  var selector_modifier = { order: 'current', page: 'current', search: 'applied' }

  var previous = '';
  var officeNodes = tbl.column(1, selector_modifier).nodes();
  var officeData = tbl.column(1, selector_modifier).data();
    for (var i = 0; i < officeData.length; i++) {
    var current = officeData[i];
    if (current === previous) {
      officeNodes[i].textContent = '';
    } else {
      officeNodes[i].textContent = current;
    }
    previous = current;
  }
}

In the above example, I am accessing column index 1 (the 2nd column in the table - so, slightly different from your question).

This function can be used as follows, with two DataTables events:

• initComplete - for the initial drawing of the table
• subsequent draw events

var table = $('#example').DataTable( {
  data: dataSet.data,
  "order": [[ 1, 'asc' ]], // just as a test for the initial draw
  columns: [
    { title: "Name", data: "name" },
    { title: "Office", data: "office" }, // values will be hidden
    { title: "Office2", data: "office" }, // values will not be hidden, for verification
    { title: "Position", data: "position" },
    { title: "Start date", data: "start_date" },
    { title: "Salary", data: "salary" }
  ],
  "initComplete": function(settings, json) {
    // in case the initial sort order leads to 
    // cells needing to be altered:
    processColumnNodes( $('#example').DataTable() );
  }
} ); 
    
table.on( 'draw', function () {
  processColumnNodes( $('#example').DataTable() );
} );

function processColumnNodes(tbl) {
  // see https://datatables.net/reference/type/selector-modifier
  var selector_modifier = { order: 'current', page: 'current', search: 'applied' }

  var previous = '';
  var officeNodes = tbl.column(1, selector_modifier).nodes();
  var officeData = tbl.column(1, selector_modifier).data();
    for (var i = 0; i < officeData.length; i++) {
    var current = officeData[i];
    console.log( i + ' ' + current );
    if (current === previous) {
      officeNodes[i].textContent = '';
    } else {
      officeNodes[i].textContent = current;
    }
    previous = current;
  }
}

An example of the result, where I have also included "Office 2", showing the original unchanged node data, for comparison:

Because we are hiding values in the HTML table nodes, functions such as sorting and filtering are not affected (the original values are still stored in DataTables, as originally loaded).

---

Clarification: For testing purposes I provided my data in a JavaScript variable:

var dataSet = {
  "data": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },

    ...

    {
      "id": "12",
      "name": "Quinn Flynn",
      "position": "Support Lead",
      "salary": "$342,000",
      "start_date": "2013/03/03",
      "office": "Edinburgh",
      "extn": "9497"
    }
  ]
};