JQuery Datatable String Sorting

Question

Note. I will hide the data column, and so I have to use the jQuery Datatable api.

For my jQuery Datatable, there is a button next to it in each row. The purpose of the button is to obtain column data. Column data will be hidden.

For my button click event, this is my code.

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

This code works, however there is one problem.
It cannot retrieve sorted column data.

For example, before sorting,
Line 1 - Index data 0 - A
Line 2 - Index data 1 - B

After sorting,
Line 2 - Index 0 Data - B
Line 1 - Index 1 Data - A

Press the button for data line B, Data Gotten: A

I hope I have explained my problem in sufficient detail. Thanks!

: https://jsfiddle.net/mt4zrm4b/3/

Answer 1

tr rowSelector row().

DOM API DataTabels DOM. , DOM node, , .

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