Jquery datatable hide column but access its value

Question

I want to hide the first column of the datatable which is IID but I want to access its value for updating data on database. Here is the code

var details = [];
            for (var m = 0; m < retrievedParsedValue.Table3.length; m++) {

                var buttonColumn = "<b><div style='cursor: pointer;' onClick=" + 'getDataForSMPS(this);' + ">Action</div></b>";

                details.push([retrievedParsedValue.Table3[m]['IID'], retrievedParsedValue.Table3[m]['RJ_FACILITY_ID'], retrievedParsedValue.Table3[m]['SMPS_AVAILABLE'], retrievedParsedValue.Table3[m]['NO_OF_SMPS_ONSITE'], retrievedParsedValue.Table3[m]['SMPS_MAKE'], retrievedParsedValue.Table3[m]['SMPS_CAPACITY'], retrievedParsedValue.Table3[m]['CONTROLLER_MODEL'], retrievedParsedValue.Table3[m]['RECT_MODULE_MODEL'], retrievedParsedValue.Table3[m]['HEALTHY_RECTIFIER_COUNT'], retrievedParsedValue.Table3[m]['BACKPLANE_RECTIFIER_SLOT'], retrievedParsedValue.Table3[m]['RECT_CAPACITY'], retrievedParsedValue.Table3[m]['SMPS_STATUS'], retrievedParsedValue.Table3[m]['NO_OF_FAULTY_MODULES'], retrievedParsedValue.Table3[m]['DC_LOAD'], retrievedParsedValue.Table3[m]['SMPS_OTHER_REMARKS'], buttonColumn]);
            }

            $('#grdSMPSRCOM').DataTable({
                destroy: true,
                data: details,
                "scrollX": true,
                columns: [
                    { title: "IID" },
                    { title: "RJ Facility ID" },
                    { title: "SMPS Available" },
                    { title: "NO of SMPS OnSite" },
                    { title: "SMPS Make" },
                    { title: "SMPS Capacity" },
                    { title: "Controller Model" },
                    { title: "Rect Module Model" },
                    { title: "Healthy Rectifier Count" },
                    { title: "Backplane Rectifier Slot" },
                    { title: "Rect Capacity" },
                    { title: "SMPS Status" },
                    { title: "No Of Faulty Modules" },
                    { title: "DC Load" },
                    { title: "SMPS Other Remarks" },
                    { title: "Validate" }
                ],
                "bDestroy": true
            });

How can I hide it but access its value.

@SureshPonnukalai: how is it duplicate ?? did u read my question — HEEN
– HEEN, Commented Mar 15, 2018 at 6:45
Possible duplicate of stackoverflow.com/questions/33083030/… — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Mar 15, 2018 at 6:59

Asons · Accepted Answer · 2018-03-15 09:24:08Z

How about simply add its value in an attribute, in this case e.g. the buttonColumn.

        for (var m = 0; m < retrievedParsedValue.Table3.length; m++) {

            var buttonColumn = "<b><div data-iid='" + [retrievedParsedValue.Table3[m]['IID'] + "' style='cursor: pointer;' onClick=" + 'getDataForSMPS(this);' + ">Action</div></b>";

            details.push(retrievedParsedValue.Table3[m]['RJ_FACILITY_ID'], retrievedParsedValue.Table3[m]['SMPS_AVAILABLE'], retrievedParsedValue.Table3[m]['NO_OF_SMPS_ONSITE'], retrievedParsedValue.Table3[m]['SMPS_MAKE'], retrievedParsedValue.Table3[m]['SMPS_CAPACITY'], retrievedParsedValue.Table3[m]['CONTROLLER_MODEL'], retrievedParsedValue.Table3[m]['RECT_MODULE_MODEL'], retrievedParsedValue.Table3[m]['HEALTHY_RECTIFIER_COUNT'], retrievedParsedValue.Table3[m]['BACKPLANE_RECTIFIER_SLOT'], retrievedParsedValue.Table3[m]['RECT_CAPACITY'], retrievedParsedValue.Table3[m]['SMPS_STATUS'], retrievedParsedValue.Table3[m]['NO_OF_FAULTY_MODULES'], retrievedParsedValue.Table3[m]['DC_LOAD'], retrievedParsedValue.Table3[m]['SMPS_OTHER_REMARKS'], buttonColumn]);
        }

And access it like this

//using [data-iid] attribute through parent
console.log(document.querySelector('.parent [data-iid]').dataset.iid);

//using click
function getDataForSMPS(el) {
  alert(el.dataset.iid);
}

<div class='parent'>
  <b><div data-iid='246' style='cursor: pointer;' onClick="getDataForSMPS(this);">Action (click me)</div></b>
</div>

If you still need the initial column, this might be an alterntive.

        for (var m = 0; m < retrievedParsedValue.Table3.length; m++) {

            var iid = "<div data-iid='" + [retrievedParsedValue.Table3[m]['IID'] + "'></div>";

            var buttonColumn = "<b><div style='cursor: pointer;' onClick=" + 'getDataForSMPS(this);' + ">Action</div></b>";

            details.push(iid, retrievedParsedValue.Table3[m]['RJ_FACILITY_ID'], retrievedParsedValue.Table3[m]['SMPS_AVAILABLE'], retrievedParsedValue.Table3[m]['NO_OF_SMPS_ONSITE'], retrievedParsedValue.Table3[m]['SMPS_MAKE'], retrievedParsedValue.Table3[m]['SMPS_CAPACITY'], retrievedParsedValue.Table3[m]['CONTROLLER_MODEL'], retrievedParsedValue.Table3[m]['RECT_MODULE_MODEL'], retrievedParsedValue.Table3[m]['HEALTHY_RECTIFIER_COUNT'], retrievedParsedValue.Table3[m]['BACKPLANE_RECTIFIER_SLOT'], retrievedParsedValue.Table3[m]['RECT_CAPACITY'], retrievedParsedValue.Table3[m]['SMPS_STATUS'], retrievedParsedValue.Table3[m]['NO_OF_FAULTY_MODULES'], retrievedParsedValue.Table3[m]['DC_LOAD'], retrievedParsedValue.Table3[m]['SMPS_OTHER_REMARKS'], buttonColumn]);
        }

4b0 · Accepted Answer · 2018-03-15 06:06:52Z

0

You can hide your 1st column using visible false.

var table =  $('#grdSMPSRCOM').DataTable({
   /// other code
});
table.column(0).visible(false);

And to get value:

var IID = table .fnGetData(position)[0]; // getting the value of the first (invisible) column

answered Mar 15, 2018 at 6:06

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Comments

Saswat · Accepted Answer · 2018-03-15 06:24:04Z

0

The column IID seems the first column. So you can hide in this way:

var oTable;
oTable = $('#grdSMPSRCOM').DataTable({
            destroy: true,
            data: details,
            "scrollX": true,
            columns: [
                { title: "IID" },
                { title: "RJ Facility ID" },
                { title: "SMPS Available" },
                { title: "NO of SMPS OnSite" },
                { title: "SMPS Make" },
                { title: "SMPS Capacity" },
                { title: "Controller Model" },
                { title: "Rect Module Model" },
                { title: "Healthy Rectifier Count" },
                { title: "Backplane Rectifier Slot" },
                { title: "Rect Capacity" },
                { title: "SMPS Status" },
                { title: "No Of Faulty Modules" },
                { title: "DC Load" },
                { title: "SMPS Other Remarks" },
                { title: "Validate" }
            ],
            "columnDefs": [
                {
                  "targets": [ 0 ],
                  "visible": false,
                  "searchable": false               
                }
             ],
            "bDestroy": true
        });

Now for the second part, you want to read data from the hidden column.

$('#grdSMPSRCOM tbody').on('click', 'tr', function () {
   selectedIndex = oTable.row(this).data()[0];   
});

answered Mar 15, 2018 at 6:24

Saswat

12.9k18 gold badges85 silver badges161 bronze badges

2 Comments

HEEN Over a year ago

so will I be able to access the value

Saswat Over a year ago

Yes. This way, you can.

Collectives™ on Stack Overflow

Jquery datatable hide column but access its value

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related