Jquery数据表隐藏列但访问其值

Posted 2023-05-07

【中文标题】Jquery数据表隐藏列但访问其值

【英文标题】：Jquery datatable hide column but access its value

【发布时间】：2018-08-23 20:21:44

【问题描述】：

我想隐藏数据表的第一列IID，但我想访问它的值以更新数据库上的数据。这是代码

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

如何隐藏它但访问它的值。

【问题讨论】：

jquery datatables hide column的可能重复

@SureshPonnukalai：它是如何重复的？你读过我的问题吗

***.com/questions/33083030/…的可能重复

【参考方案1】：

简单地在属性中添加它的值怎么样，在这种情况下，例如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]);
        

然后像这样访问它

//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>

---

如果您仍然需要初始列，这可能是一个替代方案。

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

【讨论】：

那么我应该在哪里更改？？

@BNN 再次更新。

【参考方案2】：

您可以使用 visible false 隐藏您的第一列。

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

并获得价值：

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

【参考方案3】：

IID 列似乎是第一列。所以可以这样隐藏：

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

现在对于第二部分，您要从隐藏列中读取数据。

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

【讨论】：

所以我可以访问该值

是的。这样你就可以了。