user2475096
user2475096

Reputation: 426

Jquery Datatables get row data on button click

i want to get specific row columns data on button click . here my code

var oTable = $('#grid').dataTable({

        "scrollCollapse": true,
        "paging": false,
        'aaData': dtData,
        'bPaginate': false,
        'bInfo': false,
        "ordering": false,
        "bProcessing": true,
        'bFilter': true,
        destroy: true,
    "aoColumns": [null,null,null,null,

        {
            "mData": null,
            "bSortable": false,
            "mRender": function (o) { return '<a href="">'+"<img src='images/gridchart.png'></img>" +'</a>'; }
        },
        {
            "targets": [5],
            "visible": false,
            "searchable": false
        },
    {
        "targets": [6],
        "visible": false,
         "searchable": false
    }

    ]
}).rowGrouping();

the problem is that the two last columns are not added to the dom at all, so i cannot retrieve their respective values

any help is welcome

Upvotes: 0

Views: 1917

Answers (1)

markpsmith
markpsmith

Reputation: 4918

You can add the last 2 row values as data attributes of the link like so:

'mRender': function (data, type, full) {
    return '<a data-col4=\'' + full[4] + '\' data-col5=\'' + full[5] + '\' href="">'+"<img src='images/gridchart.png'></img>" +'</a>'; 
}

The full argument is the datasource for the datatable row, so even thought the values aren't displayed, they're still available.

You would have to use jQuery to retrieve the values like this:

$('#grid tbody').on('click', 'a', function (e) {
   e.preventDefault();
   var col4Val = $(this).data('col4');
   var col5Val = $(this).data('col5');
   // you would then redirect to the link using window.location.href, adding the col4 & col5 values as querystring parameters
}

Or, you could add the parameters to the url when you render the link - you don't have anything in the href so I've assumed you're handing this with a jQuery click event.

Upvotes: 1

Related Questions