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

此代码正常运行，但有一个问题它无法检索已排序列的数据。

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

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

单击数据B行按钮，数据来了：A

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

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

Answer 1

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

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

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

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

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

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

Jquery数据表排序行

3 个答案: