how do i disable the button in a row depending on the value of another column

Ashley12345

ive been searching how to do this for ages now and i really need some help with this. what im trying to do is depending on the column, status, if it is pending then enable the edit button for that row. if its another value then it should be disabled. my code currently is:

 var table = $('#reserve_Table').DataTable({
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "ordering": true,
            "scrollX": true,
    "dom": 'Bfrtip',
"buttons": [    
            {
            extend: 'copy',
            exportOptions: {
                columns: ':visible'
            }
            }, {
            extend: 'csv',
            exportOptions: {
                columns: ':visible'
            }
            }, {
            extend: 'excel',
            exportOptions: {
                columns: ':visible'
            }
            },{
            extend: 'pdf',
            exportOptions: {
                columns: ':visible'
            }
            },{
            extend: 'print',
            exportOptions: {
                columns: ':visible'
            }
        },
        'colvis'
],
    "ajax": {
        url : "<?php echo site_url("index.php/ReserveController/reserve_page") ?>",
        type : 'GET'


    },

    "aoColumns": [
    {"mdata":null},
    {"mdata":null},
    {"mdata":null},
    {"mdata":null},
    {"mdata":null},
    {"mdata":null},
    {"mdata":null},
    {"mdata":null},
    {"mdata":null},



    {
    'mdata': null,
    "defaultContent": "<button data-target=#viewReserveModal data-toggle=modal>View</button>"
    },
            {
    'mdata': null,

    'mrender': function(data, type, full){
    if("data" == 'Pending'){
        return "<button data-target=#editReserveModal data-toggle=modal>Edit123</button>";

    }
    else{

    return "problem";
}
  }

    },




    ],

kthorngren

I'm guessing this is the code you are referring to?

    'mrender': function(data, type, full){
    if("data" == 'Pending'){
        return "<button data-target=#editReserveModal data-toggle=modal>Edit123</button>";
 
    }
    else{
 
    return "problem";
}
  }

Does it currently show the edit button if Pending or problem if not pending? Maybe all you need to do is return the button with the disabled attribute if not pending.

Kevin

kthorngren

Sorry, didn't notice the "value of another column" part of the title. You would use the full parameter to access the data in another column. You are using the legacy version of the columns.render option. In the docs the row or full, in your case parameter allows access to the data in the row.

Kevin

Ashley12345

currently it displays all columns with either the button or problem. it seems to go over all column status values and if theres a pending in any one of them then it assigns the value to all column edits. how to do i make it to just a that specific row?

Ashley12345

Ashley12345

i changed it slightly to this. so its more understandable

"ajax": {
url : "<?php echo site_url("index.php/ReserveController/reserve_page") ?>",
type : 'GET'

    },

    "aoColumns": [
    {"mdata":null}, //0 reserve id
    {"mdata":null}, //1 room id
    {"mdata":null}, //2 guest id
    {"mdata":null}, //3 length of stay
    {"mdata":null}, //4 check-in date
    {"mdata":null}, //5 check-out date 
    {"mdata":null}, //6 type
    {"mdata":null}, //7 status - get this status column value for that row edit button
    {"mdata":null}, //8 datetime
    {
    'mdata': null, //9 view button
    "defaultContent": "<button data-target=#viewReserveModal data-toggle=modal>View</button>"
    },
    {
    'mdata': null, //10 edit button
    'mRender': function(data, type, full){
    // should get the mdata 7 above. im not sure if its the correct code for it
    if("mdata[7]" != 'Pending'){
        return "";   
    }
    return "<button data-target=#editReserveModal data-toggle=modal>Edit123</button>";
  }
    }, 

kthorngren

Try replacing mdata with full in this line:
if("mdata[7]" != 'Pending'){

Kevin

Ashley12345

i changed it to
if("full[7]" != 'pending')
and its still the same. i tried to do an alert("full[7]") to see if it would show a result. it displays full[7]. " " quotations marks makes full[7] a string instead of a variable. and if i remove the quotations then the datatable will no longer display any data.

kthorngren

Sorry, didn't look close enough. You should use:
if(full[7] != 'Pending'){

Don't use the quotes so its treated as a variable.

Kevin

Ashley12345

okay. i got rid of the quotes and it seems to do something. the datatable in the view wont display anything, stuck on processing. i did inspect element and checked the network and this shows.
Uncaught TypeError: Cannot read property '7' of undefined
at render (ReserveController:613)
at jquery.dataTables.min.js:18
at Object.b.fnGetData (jquery.dataTables.min.js:12)
at B (jquery.dataTables.min.js:17)
at Hb (jquery.dataTables.min.js:65)
at Gb (jquery.dataTables.min.js:65)
at Fa (jquery.dataTables.min.js:63)
at $ (jquery.dataTables.min.js:13)
at jquery.dataTables.min.js:64
at jquery.dataTables.min.js:96

im basing it off of this work.
https://jsbin.com/gobonec/edit?js,output

kthorngren

Do you still have the full parameter in your render function, like this?
'mRender': function(data, type, full){

Or did you change to the parameters names used in the example you posted?

Here is an example using your column code:
http://live.datatables.net/vosahugu/1/edit

The example has a different table layout so the column I'm using is 2 instead of 7.

Kevin

Ashley12345

thanks a lot @kthrongren. that did it. hopefully my defence goes well.