How to put id on a button?

syntaxerr0r

I just started learning datatables only today and I read much infos on FAQs but can't find any solutions there.

I'm trying to put on a button with id getting (data[0]). On click a div with id+data[0] will collapse containing options and forms for the selected row..

here is my current code

var dataTable = $('#testT').DataTable( {
                    "processing": true,
                    "serverSide": true,
                    "ajax":{
                        url :"search_e_que.php",
                        type: "post"  
                        
                    },
                    "columnDefs": [ {
                                "targets": -1,
                                "data": null,
                                "defaultContent": "\ 
                                        <button class='btn btn-outline-dark' type='button' id='arcb-' title='Archive'>\
                                            <span class='fa fa-file-archive'></span>\
                                        </button>\
                                        <div class='collapse' id='arcc-'>\
                                            Possible Options Here\
                                        </div>",

                     },
                     {
                     // hide id_number column
                     "targets":[0],
                     "visible":false,
                     "searchable":false
                     } ],
                } );

                 $('#testT tbody').on( 'click', '#arcb-', function () {
                    var data = dataTable.row( $(this).parents('tr') ).data();
                    var id_tag = $(this).attr('id')+data[0];
                    var holder_tag = $('#arcc-').attr('id')+data[0];
                    
                    $('#arcc-').collapse();
                } );

colin

Hi @syntaxerr0r ,

I think on line 34 of your code, you can just use

$(this).next('div').collapse();

That will get the <div> after the button in that cell.

Hope that does the trick,

Cheers,

Colin

syntaxerr0r

You are a life saver it worked ! Thank you !

syntaxerr0r

i found another answer.. columns.render did the trick..

"columnDefs": [{
          "data":null,
          "render":function(data, type, row, meta){
             return data[0],data[1],data[2],data[3],data[4],data[5];
          }},
         {
            "targets":-1,
            "data":null,
             "render":function(data, type, row, meta){
             return "
                <button class='btn btn-outline-dark' type='button' data-toggle='collapse' name='arcb' data-target='#arcc-"+data[0]+"' id='arcb-"+data[0]+"' title='Archive'>\
                    <span class='fa fa-file-archive text-warning'></span>\
                </button>\
                <div class='row collapse' id='arcc-"+data[0]+"' name='arcc'>\
                        <form method='POST' name='archiveEmp' action='../../admin/employee/archiveEmployee.php'>\
                            <div class='form-group col-sm-12'>\
                                <label id='eTitle-"+data[0]+"'>Effectivity Date:</label>\
                                <input id='eDate-"+data[0]+"' type='date' name='archiveEffectDate' class='form-control' max='2999-12-31' required />\
                                </div>\
                            <div class='form-group col-sm-12'>\
                                <label id='aTitle-"+data[0]+"'>Archive Status :</label>\
                                <select id='a-status-"+data[0]+"' name='archive' class='form-control mb-3' required>\
                                    <option value ='-----''>-- Select Status--</option>\
                                    <option value ='AWOL'>AWOL</option>\
                                    <option value ='Deceased'>Deceased</option>\
                                    <option value ='Resigned'>Resigned</option>\
                                    <option value ='Retired'>Retired </option>\
                                    <option value ='Terminated'>Terminated</option>\
                                    <option value ='Transferred'>Transferred</option>\
                                    </select>\
                                <div class='text-right col-sm-12'>\
                                    <button class='btn btn-primary' data-toggle='tooltip' title='Archive Employee' type='submit' id='btnOk-"+data[0]+"' name='btnArc'><span class='fa fa-archive'></span> Archive </button>\
                                    <button class='btn btn-danger'  data-toggle='collapse' data-target='#arcc-"+data[0]+"' title='Cancel' type='button' id='btnCancel-"+data[0]+"'><span class='fa fa-ban'></span> Cancel</button>\
                                </div>\
                            </div>\
                            <input type='hidden' name='empIDHold' value='"+data[0]+"'/>\
                            <input type='hidden' name='isActive' value='0'/>\
                        </form>\
                </div>\
                ";
          }



         }, 
         {
 // hide id_number column
 "targets":[0],
 "visible":false,
 "searchable":false,
 },
 {
 "targets":[3],
 "searchable":false
 }],

"order": [[ 4, "asc" ]],