行单击时的 Jquery 数据表会弹出旧数据

Question

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

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>

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

我坚持的是

每当我第一次单击网格的“编辑”按钮时，数据都会弹出相应的相关行。但是当我第三次第四次点击时，它显示了前面几行的数据。为什么会这样。

下面是在弹出窗口中获取数据的代码

// 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获取了datatable的引用

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

Answer 2

在与我的同事对数据表中的文档进行大量研究和研究后，我想出了一个清晰且适合我的解决方案。

首先，我从button的变量中删除了onClick=" + 'OpenPopUpForUpdate("' + result.STATECODE + '");' + "函数

然后我添加了如下所示的引导属性。一些示例链接here

var buttonColumn = "<b><button type='button' data-toggle='modal' data-candidateid='" + result.CANDIDATE_ID + "' data-sapid='" + result.SAP_ID + "' data-statecode='" + result.STATECODE + "' data-state='" + result.STATE + "' data-target='#myModal'>Edit</span></button></b>";

然后在文件加载时，我写onClick 属性。如下所示

$(document).on('click', 'table#grdMWSiteSurvey button[data-target="#myModal"]', function () {   
GetIframeSRC($(this).data('sapid'), $(this).data('candidateid'), $(this).data('state'), $(this).data('statecode'), LoginUsername);   });

并像下面这样绑定GetIframeSRC

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

}

这就是我所需要的。向所有支持我的人干杯