jQuery 数据表排序行

Question

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

对于我的 jQuery 数据表，每一行旁边都有一个按钮。 该按钮的用途是检索列数据。 列数据将被隐藏。

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

    $('#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;
    });

这段代码可以运行，但是有一个问题。
无法检索已排序列的数据。

例如，在排序之前，
第 1 行 - 索引 0 数据 - A
第 2 行 - 索引 1 数据 - B

排序后，
第 2 行 - 索引 0 数据 - B
第 1 行 - 索引 1 数据 - A

点击数据 B 行按钮， 获得的数据：A

希望我已经足够清楚地解释了我的问题。谢谢！

更新小提琴：https://jsfiddle.net/mt4zrm4b/3/

Answer 1

您需要将选择器tr 作为rowSelector 参数传递给row()。

DOM 元素可以作为行选择器给出，以便从该 DOM 元素中选择 DataTabels 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);
});

有关示例，请参阅此更新的 fiddle。

Answer 2

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

Answer 3

为了检索第二个td 的值，您可以使用

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

在您的代码中，您拥有感兴趣的整行，您可以将其作为 DOM 元素进行搜索。