jQuery数据表隐藏列，但访问其值

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.

Answer 1

How about simply add its value in an attribute, in this case eg 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]);
        }

Answer 2

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

Answer 3

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