jQuery Datatable排序行

Question

注意：我将隐藏数据列，因此必须使用jQuery Datatable API。

对于我的jQuery Datatable，每一行都有一个按钮。按钮的目的是检索列数据。列数据将被隐藏。

对于我的按钮点击事件，这是我的代码。

    $('#Table').on('click', '.Button', function () {
        var tr = $(this).closest("tr");
        var rowindex = tr.index();
        //Get row based on index
        var rowData = $("#Table").DataTable().row(rowindex).data();
        var data = rowData.Data;
    });

这段代码可以正常运行，但是存在一个问题。它无法检索排序列的数据。例如，在排序之前，第一行索引为0，对应的数据为A；第二行索引为1，对应的数据为B。在排序之后，第一行索引为1，对应的数据为A；第二行索引为0，对应的数据为B。点击Data B行按钮后，获取到的数据是A。希望我已经清楚地解释了我的问题。谢谢！更新的Fiddle链接: https://jsfiddle.net/mt4zrm4b/3/

- Jiawei Tan

---

你的解释非常清晰，但如果您能为此创建fiddle，那将是一个很大的帮助。 - Help

Answer 1

您需要将选择器tr作为row()方法的rowSelector参数传递进去。

DOM元素可以作为行选择器传递到DataTables API中，从而选择一个数据表格中的行。当您仅有DOM节点作为参考（例如在事件处理程序中），这非常有用，可以获取一行数据或执行其他基于行的操作。

原因是因为如果您进行排序，DataTables没有更新行索引。建议通过tr选择行，代码如下：

$('#Table').on('click', '.Button', function() {
    var tr = $(this).closest("tr");

    // Get row based on tr instead.
    var rowData = $("#Table").DataTable().row(tr).data();
    var data = rowData.Data;
    alert(data);
});

请查看此更新的JSFiddle示例。

- Jia Jian Goi

---

那就是我正在寻找的答案。谢谢！ :) - Jiawei Tan

Answer 2

为了获取第二个 td 的值，您可以使用以下代码：

alert(tr.find("td:nth-child(2)").text());

在你的代码中，你有感兴趣的整行数据，并且可以将其作为 DOM 元素进行搜索。

- Matteo Massarin

---

抱歉表述不够清楚。我将隐藏数据列，因此必须使用Jquery Datatable API。 - Jiawei Tan

Answer 3

  var object = {
        "Data": "A",
        "Id": "1"
      };
      var objectB = {
        "Data": "B",
        "Id": "2"
      };
      var dataSet = [];
      dataSet.push(object);
      dataSet.push(objectB);

      console.log(dataSet);

      var table = $('#Table').DataTable({
        data: dataSet,
        lengthMenu: [5, 10, 15, 20, 25],
        columns: [{
          'data': null,
        }, {
          'data': 'Id',
        }, {
          'data': 'Data',
        }, {
          'data': null,
        }],
        "oLanguage": {
          "sEmptyTable": "Error: Empty Table. Please create a new question"
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
          $("td:first", nRow).html(iDisplayIndex + 1);
          return nRow;
        },
        'columnDefs': [{
          'targets': [0],
          'searchable': true,
          'orderable': false
        }, {
          "targets": [1],
          "visible": false,
          "searchable": false
        }, {
          'targets': [-1],
          'searchable': false,
          'orderable': false,
          'render': function(data, type, full, meta) {
            return '<button type="button" class="btn btn-warning Button">Get ID</button>';
          }
        }],
        bProcessing: true,
        bStateSave: false,
        bPaginate: true,
      })

      var rowCount = $('#QuizTb').on('order.dt search.dt', function() {
        table.column(0, {
          search: 'applied'
        }).nodes().each(function(cell, i) {
          cell.innerHTML = i + 1;
        });
      });

      $('#Table').on('click', '.Button', function() {
        var tr = $(this).closest("tr");            
        var data = $(this).closest("tr").find('td:eq(1)').text();
        alert(data);
      });

- Jobelle