从数据表的上一行获取特定列的文本

Question

我显示一个数据表，我想知道第一列前一行的值（也是文本）。如果相同，我想返回 '';而不是显示它而不是显示文本。

     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;
                        }

                    }
                       
                    }
                }

Answer 1

这是一种方法，它迭代以下项目：

• 特定列中的 HTML 表格节点
• 同一列的等效 DataTable 单元格值

代码使用来自底层 DataTable 对象的单元格值来查看值何时更改。然后它使用该信息来更改相关的 HTML 表格节点值（您在 HTML 中看到的内容）。

因此，虽然底层的 DataTable 值永远不会改变，但 HTML 值会被调整。

此外，我们使用selector modifier，它指示tbl.column() 函数如何处理排序和过滤的数据。基本上，我们只对用户可见的数据进行操作。

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;
  }
}

在上面的示例中，我正在访问列索引 1（表中的第二列 - 因此，与您的问题略有不同）。

这个函数可以如下使用，有两个DataTables事件：

• initComplete - 用于表格的初始绘制
• 随后的draw 事件

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;
  }
}

结果示例，其中我还包括“Office 2”，显示原始未更改的节点数据，以进行比较：

由于我们将值隐藏在 HTML 表格节点中，因此排序和过滤等功能不受影响（原始值仍存储在 DataTables 中，与最初加载时一样）。

---

澄清：出于测试目的，我在 JavaScript 变量中提供了我的数据：

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"
    }
  ]
};