jQuery Datatable Sorted Row

Question

Note: I will be hiding the data column and hence I have to use jQuery Datatable API.

For my jQuery Datatable, each row have a button beside it. The purpose of the button is to retrieve the column data. The 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 is working, however there is one problem.
It is not able to retrieve the data of the sorted column.

For example, before Sorting,
Row 1 - Index 0 Data - A
Row 2 - Index 1 Data - B

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

Clicked on Data B row button, Data Gotten: A

Hopefully I have explained my problem clear enough. Thanks!

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

You are very clear in your explanation, but it will be a great help if u can create fiddle for it. — Help
– Help, Commented Jan 15, 2016 at 7:36

Jia Jian Goi · Accepted Answer · 2016-01-15 11:58:53Z

7

You need to pass in your selector tr as the rowSelector parameter for row().

DOM elements can be given as a row selector to select a row in the DataTabels API from that DOM element. This can be useful for getting data from a row, or performing other row based operations, when you have only the DOM node for reference, for example in an event handler.

The reason is because if you were to sort, the row indexes that DataTables doesn't get updated. It's recommended to select the row via your tr, like this:

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

See this updated fiddle for an example.

answered Jan 15, 2016 at 11:58

Jia Jian Goi

1,4233 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jiawei Tan Over a year ago

That's the answer I'm looking for. Thanks! :)

Jobelle · Accepted Answer · 2016-01-15 09:09:49Z

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

sentenza · Accepted Answer · 2016-01-15 18:17:09Z

0

In order to retrieve the value of the second td you can use

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

In your code you have the entire row of interest and you can search in it as a DOM element.

edited Jan 15, 2016 at 18:17

sentenza

1,7503 gold badges31 silver badges57 bronze badges

answered Jan 15, 2016 at 8:33

Matteo Massarin

112 bronze badges

1 Comment

Jiawei Tan Over a year ago

Hi, sorry for not stating it clear enough. I will be hiding the data column and hence I have to use Jquery Datatable api.

Collectives™ on Stack Overflow

jQuery Datatable Sorted Row

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related