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

Question

我想隐藏数据表的第一列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
            });

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

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

Answer 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

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