Question

我有一个场景，我在Jquery datatable中绑定我的数据。所以我为此做了类似的事。

＆＃13;

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

＆＃13;

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

＆＃13;

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

我坚持的是

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

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

＆＃13;

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

＆＃13;

那么错误和根本原因是什么呢？请建议。

注意我从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();
}

Answer 2

经过大量的研究，并与我的同事一起研究数据表中的文件后，我提出了一个明确的解决方案，对我来说很好。

首先我做的是，我从onClick=" + 'OpenPopUpForUpdate("' + result.STATECODE + '");' + "

变量中删除了button函数

然后我添加了如下的bootstrap属性。一些示例链接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();

}

这就是我所需要的一切。欢迎所有支持我的人

行点击时出现Jquery数据表会弹出旧数据

2 个答案: