Get data for selected row to use in a custom JavaScript function

orionaselite

I have the following code. Using it I was able to add a column of action buttons. Edit, Delete and Change Status.

 <script>
var editor; // use a global for the submit and return data rendering in the examples
var table;
//start custom functions
//add some custom functions start
function MyEditFunction()
{
alert ('clicked edit'); 
}

function MyDeleteFunction(table)
{
alert("clicked delete ");
var data = table.row( $(this).parents('tr') ).data();
        alert(data[0]);
}

function MyChangeStatusFunction()
{
alert ('clicked change status');    
}
//add some custom functions end

//end custom functions




(function($){

$(document).ready(function() {
     editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.users.php',
        table: '#users',
        fields: [
            {
                "label": "Profile Picture",
                "name": "profile_pic",
                "type": "upload",
                display:function ( data, type, row ) {
                var path ='http://localhost/test/upload/profile_pics/'+data;    
                //return '<img class="img-circle" src="'+path" width="100"/>';
                return '<img width="100" class="img-circle" src="'+path+'"/>';                },
                clearText: "Delete",
                noImageText: 'No Image'
            },
            
            {
                "label": "Full Name",
                "name": "full_name"
            },
            {
                "label": "Email",
                "name": "email"
            },
            {
                "label": "Password",
                "name": "password",
                "type": "password"
            },
            {
                "label": "Date of Birth",
                "name": "dob",
                "type": "datetime",
                "format": "d-m-Y"
            },
            {
                "label": "Phone #",
                "name": "phone_number"
            },
            {
                "label": "Status",
                "name": "status",
                type:  "select",
                options: [
                    { label: "Inactive",value: 0 },
                    { label: "Active",value: 1 },
                    { label: "Deleted",value: 2}
                    
                ]
            }
        ]
    } );
// Activate an inline edit on click of a table cell
    $('#users').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            buttons: { label: '&gt;', fn: function () { this.submit(); } }
        } );
    } );    
    table = $('#users').DataTable( {
    //  "language": {
         //       "url": "DataTables/languages/dataTables.greek.lang"
          // },
        "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
        ajax: 'php/table.users.php',
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            {
                "data": "profile_pic",
                render: function ( data, type, row ) {
                var path ='http://localhost/test/upload/profile_pics/'+data;    
                //return '<img class="img-circle" src="'+path" width="100"/>';
                return '<img width="100" class="img-circle" src="'+path+'"/>';
                }
            },
            {
                "data": "full_name"
            },
            {
                "data": "email"
            },
            {
                "data": "password",
                render: function ( data, type, row ) {return '****';}
            },
            {
                "data": "dob"
            },
            {
                "data": "phone_number"
            },
            {
                "data": "status",
                render: function(data,type,row){
                if (data==0){return '<label for=\"status\" id="lblstatus" class="label label-warning">InActive</label>';}
                if (data==1){return '<label for=\"status\" id="lblstatus" class="label label-success">Active</label>';}
                if (data==2){return '<label for=\"status\" id="lblstatus" class="label" style="background-color:red;">Deleted</label>';}
                }
            },
            {
                data: null,
                defaultContent: '<div class=\"btn-group\"><a href=\"#\" onclick=\"MyEditFunction();return false;\" data-toggle=\"tooltip\" title=\"Edit\" class=\"btn btn-xs btn-default\"><i class=\"fa fa-pencil\"></i></a><a href=\"#\" onclick=\"MyDeleteFunction(table);return false;\" data-toggle=\"tooltip"\ title=\"Delete\" class=\"btn btn-xs btn-danger\"><i class=\"fa fa-times\"></i></a><a href=\"#\" onclick=\"MyChangeStatusFunction();return false;\" data-toggle=\"tooltip\" title=\"Change Status\" class=\"btn btn-xs btn-stop\"><i class=\"fa fa-stop\"></i></a></div>',
                //className: 'select-checkbox',
                orderable: false
            }
            
            
        ],
        order: [ 1, 'asc' ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        select: true,
        //lengthChange: false
    } ); 
    
    
    
    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor},
        { extend: "edit",   editor: editor},
        { extend: "remove", editor: editor}
    ] );

    table.buttons().container()
        .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
} );

}(jQuery));

</script>

What I need to achieve is the following:

1. When I click my edit button the editor should open for that row just like when i select a row and click the Datatables edit button for a specific row. My javascript executes showing the alert but then I am unsure what else to add.

2. When I click delete I will run a little ajax that changes the status field for that row to Deleted which is basically value 2 in my db for that field (status). I assume I should add something like

3. When I click change status I will run a little ajax that changes the status field for that row to either active or inactive which is basically values 0,1 in my db for that field (status). I assume I should add something like

$.get("changestatus.php?uid="+row, function(data, status){
//need to call draw I am guessing
});
My problem here is getting the primary key value for that row so I can send it to my script as parameter uid same as before. As you can see. Also I myDeleteFunction data is undefined . Any ideas?

allan

1) You need to call edit() and pass in whatever options you need (including the row that was clicked on).

2) Like what? I think the sentence is incomplete. It sounds like you don't want to delete the row, but rather edit it to mark it as deleted?

3) You could use edit() for that as well (assuming the status is in the Editor form). You if you prefer you can write your own code to do it. row().data() will get the data for the row.

Allan

orionaselite

I tried

editor.edit(
table.rows( { selected: true } ).indexes()
hoping that would be enough to tell me the id of the selected row and open the editor for that row but, No joy. I get uncaught exception: Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11 So tried solving it buy adding editField like this.

{
                data: null,editField: "user_id",
                defaultContent: '<div class=\"btn-group\"><a href=\"#\" onclick=\"MyEditFunction();return false;\" data-toggle=\"tooltip\" title=\"Επεξεργασία\" class=\"btn btn-xs btn-default\"><i class=\"fa fa-pencil\"></i></a><a href=\"#\" onclick=\"MyDeleteFunction(table);return false;\" data-toggle=\"tooltip"\ title=\"Διαγραφή\" class=\"btn btn-xs btn-danger\"><i class=\"fa fa-times\"></i></a><a href=\"#\" onclick=\"MyChangeStatusFunction();return false;\" data-toggle=\"tooltip\" title=\"Delete\" class=\"btn btn-xs btn-stop\"><i class=\"fa fa-stop\"></i></a></div>',
                //className: 'select-checkbox',
                orderable: false
            }

Same issue

orionaselite

maybe my whole issue arises because of the way I created the three buttons in my non-database related column

{
                data: null,editField: "user_id",
                defaultContent: '<div class=\"btn-group\"><a href=\"#\" onclick=\"MyEditFunction();return false;\" data-toggle=\"tooltip\" title=\"Επεξεργασία\" class=\"btn btn-xs btn-default\"><i class=\"fa fa-pencil\"></i></a><a href=\"#\" onclick=\"MyDeleteFunction(table);return false;\" data-toggle=\"tooltip"\ title=\"Διαγραφή\" class=\"btn btn-xs btn-danger\"><i class=\"fa fa-times\"></i></a><a href=\"#\" onclick=\"MyChangeStatusFunction();return false;\" data-toggle=\"tooltip\" title=\"Delete\" class=\"btn btn-xs btn-stop\"><i class=\"fa fa-stop\"></i></a></div>',
                //className: 'select-checkbox',
                orderable: false
            }

allan

I would strongly encourage you to not use DOM0 events, but rather bind a jQuery event:

$('#myTable').on( 'click', 'a.buttonClass', function () {
  editor.edit( $(this).closest('tr') );
} );

where obviously buttonClass would need to be renamed to be sensible and attached to the appropriate button.

Allan

orionaselite

I did that yesterday and solved me issue I forgot to come back to look for new answers. Just saw the solution now although it had already worked because your advice got me thinking. Thanks