javascript - 单击行上的 Jquery 数据表将旧数据弹出

Question

我有一个场景，我将数据绑定(bind)到 Jquery 数据表 中。所以为此我做了这样的事情。

function getDashboardData() {    

    var ddlState = $('#ContentPlaceHolder1_ddlR4GState').val();

    try {

        $('#grdMWSiteSurvey_wrapper').show();

        $.ajax({
            type: "POST",
            url: "Dashboard.aspx/BindMWSiteSurvey",
            data: JSON.stringify({ STATE: ddlState }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                var datVal = JSON.parse(data.d);

                if (ddlState == "Select State") {
                    hideLoader();
                    $('#grdMWSiteSurvey_wrapper').hide();
                    return false;
                }

                else {

                    if (datVal.length == 0) {
                        hideLoader();
                        $('#grdMWSiteSurvey_wrapper').hide();
                        return false;
                    }

                    var details = [];

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

                        var buttonColumn = "<b><button type='button' data-toggle='modal' data-target='#myModal' onClick=" + 'OpenPopUpForUpdate("' + result.STATECODE + '");' + ">Edit</span></button></b>";
                        details.push([result.SAP_ID, result.CANDIDATE_ID, result.STATE, result.SITE_NAME, result.CANDIDATESTATUS, buttonColumn]);
                    }


                    $('#grdMWSiteSurvey').DataTable({
                        destroy: true,
                        autoWidth: false,
                        "aaData": details,
                        "aoColumns": [
                            { "sTitle": "Sap ID" },
                            { "sTitle": "Candidate ID" },
                            { "sTitle": "State" },
                            { "sTitle": "Site Name" },
                            { "sTitle": "Candidate Status" },
                            //{ "sTitle": "Current Status" },
                            { "sTitle": "ACTION" }
                        ],                        
                        "bDestroy": true
                        //"bServerSide": true
                    });

                    hideLoader();
                }
            },
            error: function (data) {
                hideLoader();
                alert('Cannot load the data currently, Please try after sometime..!!');
            }
        });

    } catch (e) {
        //exception
    }
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="grdMWSiteSurvey" class="display responsive nowrap"></table>

所以当上面的代码运行时，它会显示并绑定(bind)数据，如下所示。

我坚持的是

Whenever I click on the Edit button of the grid say for the first time, the data comes in a pop up of the proper relevant row. But when I click for the third fourth time, it shows me the data of the earlier rows. Why does that happens.

下面是获取弹窗数据的代码

// Open popup for edit
function OpenPopUpForUpdate(StateCode) {

    var table = $('#grdMWSiteSurvey').DataTable();
    stateCode = StateCode;

    $('#grdMWSiteSurvey tbody').on('click', 'tr', function () {
        var row = table.row(this).data();

        GetIframeSRC(row[0], row[1], row[2], stateCode, row[6], row[7]);
    });
}

// set iframe
function GetIframeSRC(SapID, CandidateID, state, stateCode) {

    //  showLoader();

    var Iframesrc = "FileUpload.aspx?SapID=" + SapID + "&CandID=" + CandidateID + "&St=" + state + "&Stcod=" + stateCode + "&UName=" + LoginUsername;

    $("#ifrmDownload").attr({
        'src': Iframesrc
    });

    // hideLoader();
}

那么这个错误和根本原因是什么。请建议。

注意 我从here 中获取了数据表的引用

Answer 1

实际上代码的问题是您在编辑行后没有保存数据。

编辑行后，您必须保存数据。假设您的 iframe 中有一个按钮，您将在编辑后按下该按钮，并且该按钮将调用函数 saveData()

function OpenPopUpForUpdate(StateCode) {

    var table = $('#grdMWSiteSurvey').DataTable();
    stateCode = StateCode;

    $('#grdMWSiteSurvey tbody').on('click', 'tr', function () {
        var row = table.row(this).data();
        var that = this; // save the row that is selected 

        GetIframeSRC(row[0], row[1], row[2], stateCode, row[6], row[7]);
    });
}

function saveData() {
 // use jquery to get the data you have just edited and save it in a variable "newData"
 table
        .row( that ) // change the selected row in the datatable
        .data( newData ) // with the newData
        .draw();
}