javascript - 行单击时的 Jquery 数据表会弹出旧数据
问题描述
我有一个场景,我将我的数据绑定在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();
}
那么这是什么错误和根本原因。请建议。
注意我从这里参考了数据表
解决方案
在与我的同事对数据表中的文档进行大量研究和研究后,我想出了一个清晰且适合我的解决方案。
首先我所做的是,我onClick=" + 'OpenPopUpForUpdate("' + result.STATECODE + '");' + "
从变量中删除了函数button
然后我添加了如下所示的引导属性。这里有一些示例链接
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();
}
这就是我所需要的。向所有支持我的人干杯
推荐阅读
- php - 单击“国家/地区”时显示会议无法正常工作
- php - 使用 openssl 时 PHP 脚本停止且没有错误
- javascript - 未捕获(承诺)错误
- sql - 连接两个表创建第三个 sql
- python - 在熊猫中如何搜索单词和短语来创建新的数据框?
- javascript - 如何在打字稿中分配对象并替换对象名称?
- c - GCC 如何在汇编代码中传递参数/返回?
- c# - 在 .NET 的同一解决方案中使用两个 IoC 容器的缺点?
- python - 如何使用 opencv python 调整亮度、对比度和鲜艳度?
- firebase - 您应该从“firebase”还是“firebase/app”导入 firebase 类型?