How to put id on a button?

How to put id on a button?

syntaxerr0rsyntaxerr0r Posts: 3Questions: 1Answers: 0
edited August 2018 in Free community support

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();
                } );

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    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

  • syntaxerr0rsyntaxerr0r Posts: 3Questions: 1Answers: 0

    You are a life saver it worked ! Thank you !

  • syntaxerr0rsyntaxerr0r Posts: 3Questions: 1Answers: 0

    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" ]],
    
This discussion has been closed.