Quantcast
Channel: DataTables 1.10 — DataTables forums
Viewing all articles
Browse latest Browse all 2364

Change value and class of data in different column on button click, I'm just stuck

$
0
0

I know I have to be close on this but just can't seem to figure it out.

I have my table which has action buttons in each row and the event is being called fine on the click of the button with class .denyrequest

$('#tblreviewrequests tbody').on('click', '.denyrequest', function () {

Trouble is I can't seem to reference the row and the the specific cell to change the data value in column 0 (the "Status:name" column) which is not the column of the action buttons.

I want to change the class from 'label-success' to 'label-important' and the cell value from "Pending" to "Denied". I'm using jquery and able to swap the classes but figure there has to be an easier way with datatables. I can't figure out how to replace the current data ("Pending") to "Deny".

Here is my code and lot of the things I've tried but don't work (usually undefined or just error).

$('#tblreviewrequests tbody').on('click', '.denyrequest', function () {
       
        var tblstatus = $('#tblreviewrequests').DataTable();
        
        //works to get me the row ID which I have set in my datatable object rowId: 'event_id', but why doesn't tblstatus.row(this).id()) work?
        var $event_id = $(this).parents('tr').attr('id'); 
         
        //works to change class but seems hacky
        $(this).parents('tr').find('.lblstatus').removeClass('label-success').addClass('label-important'); 
    
        //Does not change data value
        //tblstatus.cell({row:2, column:1}).data('Denied');//just trying to change data I know this isn't the necessarily the right row. I want to use the ID or "this" to determine the current row.

        //alert (tblstatus.column(5).data());
        //alert (tblstatus.cell(this.row,0).data());
        //alert (tblstatus.row(this).id());
        // var columnData = tblstatus.column( this ).data();
        //var rowData = tblstatus.row( this ).data();
        //alert (tblstatus.row($(this)).id());
        //var row = tblstatus.row('#row-'+ $event_id);
        //var row = tblstatus.row(1).node();
        //tblstatus.cell(row,0).data('Denied').draw();
        //var id = tblstatus.row( $(this) ).data().id;
        //alert( 'Clicked row id ' + id );

        var data = tblstatus.row( $(this).parents('tr') ).data(); //works to save row data but can't edit it
       
         //  alert( data['status'] +"'s salary is: "  + data['event_id']); //works
        //data['status'].data('denied').draw();
    });

I can put in the table and ajax data in here but think this is more of a conceptual question than specific to my use case. I have scoured the examples and references and forums just not having muck luck.

Also, I'll be donating after I post this. You guys have been really helpful in the past. Thanks in advance.

Link to test case: n/a
Debugger code (debug.datatables.net): n/a
Error messages shown: n/a
Description of problem: my ineptitude


Viewing all articles
Browse latest Browse all 2364