獲取jquery數據表的當前行點擊數據

Question

我有一個jquery datatable數據表，將數據帶到一個表中。 現在，每一行都有一個update按鈕。 單擊該選項卡時將打開一個選項卡，並在其中填充相關數據。 因此，為了獲取當前的行點擊值，我嘗試了如下代碼

function getDataForSMPS() {
        var table = $('#grdSMPSRCOM').DataTable();

        $('#example tbody').on('click', 'div', function () {
            console.log(table.row(this).data());
        });
    }

但是無法獲取數據。

這是我完整的jQuery數據表代碼

var details = [];

        for (var i = 0, len = retrievedParsedValue.length; i < len; i++) {
            var result = retrievedParsedValue[i];

            var buttonColumn = "<b><div style='cursor: pointer;' onClick=" + 'getDataForSMPS();' + ">Update</div></b>";
            details.push([retrievedParsedValue[i]['RJ_FACILITY_ID'], retrievedParsedValue[i]['IID'], retrievedParsedValue[i]['SMPS_AVAILABLE'], retrievedParsedValue[i]['NO_OF_SMPS_ONSITE'], retrievedParsedValue[i]['SMPS_MAKE'], retrievedParsedValue[i]['SMPS_CAPACITY'], retrievedParsedValue[i]['CONTROLLER_MODEL'], retrievedParsedValue[i]['RECT_MODULE_MODEL'], retrievedParsedValue[i]['HEALTHY_RECTIFIER_COUNT'], retrievedParsedValue[i]['BACKPLANE_RECTIFIER_SLOT'], retrievedParsedValue[i]['RECT_CAPACITY'], retrievedParsedValue[i]['SMPS_STATUS'], retrievedParsedValue[i]['NO_OF_FAULTY_MODULES'], retrievedParsedValue[i]['DC_LOAD'], retrievedParsedValue[i]['SMPS_OTHER_REMARKS'], buttonColumn]);
        }

        $('#grdSMPSRCOM').DataTable({
            destroy: true,
            data: details,
            "scrollX": true,
            columns: [
                { title: "RJ_FACILITY_ID" },
                { title: "IID" },
                { 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: "Update Data" }
            ],
            "bDestroy": true
        });

Answer 1

您使用的是#example而不是grdSMPSRCOM，

嘗試這個，

var details = [];
        for (var i = 0, len = retrievedParsedValue.length; i < len; i++) {
            var result = retrievedParsedValue[i];

            var buttonColumn = "<div class='edit_btn' style='cursor: pointer;' >Update</div>";
                        details.push([retrievedParsedValue[i]['RJ_FACILITY_ID'], retrievedParsedValue[i]['IID'], retrievedParsedValue[i]['SMPS_AVAILABLE'], retrievedParsedValue[i]['NO_OF_SMPS_ONSITE'], retrievedParsedValue[i]['SMPS_MAKE'], retrievedParsedValue[i]['SMPS_CAPACITY'], retrievedParsedValue[i]['CONTROLLER_MODEL'], retrievedParsedValue[i]['RECT_MODULE_MODEL'], retrievedParsedValue[i]['HEALTHY_RECTIFIER_COUNT'], retrievedParsedValue[i]['BACKPLANE_RECTIFIER_SLOT'], retrievedParsedValue[i]['RECT_CAPACITY'], retrievedParsedValue[i]['SMPS_STATUS'], retrievedParsedValue[i]['NO_OF_FAULTY_MODULES'], retrievedParsedValue[i]['DC_LOAD'], retrievedParsedValue[i]['SMPS_OTHER_REMARKS'] + buttonColumn]);
        }

$('#grdSMPSRCOM').DataTable({
            destroy: true,
            data: details,
            "scrollX": true,
            columns: [
                .....
            ],
            "bDestroy": true
        });


        var table = $('#grdSMPSRCOM').DataTable();


   $('#grdSMPSRCOM').on('click', 'tbody .edit_btn', function () {
    var data_row = table.row($(this).closest('tr')).data();
    console.log(data_row);
   } );

供您參考， http：//jsfiddle.net/f4bppa43/1276/