如何迭代数据表检索行并在按钮单击时使用ajax显示在模式文本字段上 [英] How to iterate through a datatable retrieve a row and display on a modal text field on button click using ajax
本文介绍了如何迭代数据表检索行并在按钮单击时使用ajax显示在模式文本字段上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个数据表我加载了记录，我希望能够点击一个行按钮，行按钮将显示一个模态对话框，使用Ajax对象填充模态文本字段和相应的行值。
i想要如果用户点击数据表上的编辑按钮，模态对话框将显示相应的行记录，我已经尝试了一些在线研究，但我还没有能够为了实现这一点，我的ajax函数中的一个部分显示了我尝试过的不起作用的部分。任何帮助将不胜感激
我尝试过：
我的Ajax函数：
< script type = 文本/ JavaScript的>
$（ document ）。ready（ function （）{
var table = $（ ＃tblAppointment）。DataTable（）;
$（ ＃UpdateButton）。click（ function （）{
$ .ajax（{
url：' / Appointment / EditPatientAppointment /'，
类型： POST，
data： JSON .stringify（{AppointmentIdEdit：$（ ＃AppointmentIdEdit）。val（），appointmentDate：$（ 。datetimepickerEdit）。val（），patientRegNo：$（ ＃patientRegNoEdit）。val（），reason：$（ ＃reasonsEdit）。val（）}），
cache： false ，
dataType： json，
contentType： application / json; charset = utf-8，
成功： function （_ data）{
$（ .spina）。hide（）;
// $（＃patientRegNo）。text（_data.MatricRegNo ++ _data.PatientName）
if （_data.f！== undefined ）{
swal（{
title： 失败！，
text：_data.f，
type： info
}）;
table = $（ ＃tblAppointment）。DataTable（）;
re转 false ;
}
else {
swal（{
title： 成功！，
text：_data.s，
type： success
}）;
}
table = $（ ＃tblAppointment）。DataTable（） ;
// 返回false;
var arr = $ .map（ JSON .parse（_data.data）， function （el）{ return el}）;
if （arr.length === 0 ）{
swal（{
title： 找不到记录！，
text ：_data.f，
类型： info
}）;
table = $（ ＃tblAppointment）。DataTable（）;
return false ;
}
table.clear（）;
table.destroy（）;
$（' ＃tblAppointment'）。dataTable（{
data：arr ，
列：[
{ data： MatricRegNo}，
{ data： PatientName}，
{ data： EntryDate}，
{ data ： AppointmentDate}，
{ data： 原因}，
{
data：< span class =code-keyword> function （data，type，row，meta）{
return ' < span class =btn btn-info btn-sm editdata-toggle =modaldata-target =＃modal-Edit > < / span>';
// 我在此处检索和显示模态文本字段的代码
$（ 。editA [data-target ='＃modal-Edit'] ）。click（ function （）{
var columnHeadings = $（< span class =code-string> thead th）。map（ function （）{
return $（ this ）。text（）;
} ）.get（）;
columnHeadings.pop（）;
var columnValues = $（ this ）。亲（）.siblings（）。map（ function （）{
return $（此）文本（）;
}）。get（）;
var myModal = $（' #modal -edit'）;
$（' ＃AppointmentIdEdit'，myModal）.val（data.MatricRegNo）;
$（' ＃patientRegNoEdit'，myModal）.val（data.MatricRegNo）;
$（' .accountingDateEdit'，myModal）.val（data.AppointmentDate）;
$（' ＃reasonsEdit'，myModal）.val（data.Reasons）;
console .log（ 列值： + data.Reasons）;
myModal.modal（{show： true }）;
return false ;
}）;
// 我在模态文本字段中检索和显示的代码在此处结束
}
}
]，
dom：' Bfrtip'，
按钮：[
' copy' ，' csv'，' excel'，
{
extend：' pdfHtml5'，
方向：' Portriat'，
pageSize：' A4'
}
]
}）;
table = $（ ＃tblAppointment）。DataTable（）;
}
}）;
}）;
}）;
我的模态代码：
< div class = modal fade id = modal-Edit >
< div class = 模态对话框 >
< div 类 = modal-content >
< div class = modal-标题 >
< 按钮 类型 = 按钮 class = close data-dismiss = modal aria-label = 关闭 >
< span aria-hidden = true > ×< / span < span class =code-keyword>>
< / button >
< h4 class = modal-title > 编辑约会< / h4 >
< / div >
@using（Html.BeginForm（））
{
< div class = modal-body >
< div class = form-horizontal >
< div class = form-group >
< label id = lblAppointmentIdEdit < span class =code-attribute> class = 对照ol-label col-md-2 style = display：none; > AppointmentId：< / label >
< div class = col-md-10 >
< 输入 type = text value = id = AppointmentIdEdit name = AppointmentIdEdit class = form-control appointmentIdEdit style = display：none; / >
< / div >
< / div >
< div class = form-group >
< label < span class =code-attribute> id = lblPatientRegNoEdit class = control-label col-md-2 > RegNo：< / label >
< div class = col-md-10 >
< 输入 type = text value = id = patientRegNoEdit name = patientRegNoEdit class = form-control patientRegNoEdit readonly / >
< / div >
< / div >
< div class = form-group >
< label id = appointmentDateEdit class = control-label col-md-2 > 日期：< ; / label >
< div class = col-md-10 >
< div class =' 输入组日期' id =' datetimepickerEdit' >
< 输入 type =' < span class =cod电子关键字>文字 class = form-control datetimepickerEdit id = appointmentDateEdit name = appointmentDateEdit value = / >
< span class = input-group-addon datetimepicker-addonEdit >
< span class = glyphicon glyphicon-calendar > < / span >
< / span >
< / div >
< / div >
< / div >
< div class = form-group >
< label id = < span class =code-keyword> lblReasonsEdit class = control-label col-md-2 > 原因：< /标签 >
< div class = col-md-10 >
< textarea rows = 4 cols = 50 id = reasonEdit 名称 = reasonEdit class = 表单控制reasonEdit > < / textarea >
< < span class =code-leadattribute> / div >
< / div >
< / div >
< / div >
}
< div class = modal-footer >
< 按钮 type = button class = < span class =code-keyword> btn btn-default pull-left data-dismiss = modal > 关闭< / button >
< 按钮 type = submit id = UpdateButton name = UpdateButton class = btn btn-primary update > 更新< / button >
< / div >
< / div >
<！ - /.modal-content - >
< / div >
< ！ - /.modal-dialog - >
< / div > 解决方案
(document ).ready(function () {
var table =
(\"#tblAppointment\").DataTable();
(\"#UpdateButton\").click(function () {
I have a datatable i loaded with records, i want to be able to click on a row button, the row button will display a modal dialog, populate the modal text fields with corresponding row values using Ajax object.
i want if a user clicks on the edit button on the datatable, a modal dialog will display with the corresponding row record, i have tried a few research online, but i have not been able to implement this, a section in my ajax function shows what i have tried that is not working. Any assistance will be appreciated
What I have tried:
My Ajax Function:
<script type="text/javascript">
$(document).ready(function () {
var table = $("#tblAppointment").DataTable();
$("#UpdateButton").click(function () {
$.ajax({
url: '/Appointment/EditPatientAppointment/',
type: "POST",
data: JSON.stringify({ AppointmentIdEdit: $("#AppointmentIdEdit").val(), appointmentDate: $(".datetimepickerEdit").val(), patientRegNo: $("#patientRegNoEdit").val(), reasons: $("#reasonsEdit").val() }),
cache: false,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (_data) {
$(".spina").hide();
//$("#patientRegNo").text(_data.MatricRegNo + " " + _data.PatientName)
if (_data.f !== undefined) {
swal({
title: "Failed!",
text: _data.f,
type: "info"
});
table = $("#tblAppointment").DataTable();
return false;
}
else {
swal({
title: "Success!",
text: _data.s,
type: "success"
});
}
table = $("#tblAppointment").DataTable();
// return false;
var arr = $.map(JSON.parse(_data.data), function (el) { return el });
if (arr.length === 0) {
swal({
title: "No Record Found!",
text: _data.f,
type: "info"
});
table = $("#tblAppointment").DataTable();
return false;
}
table.clear();
table.destroy();
$('#tblAppointment').dataTable({
data: arr,
columns: [
{ "data": "MatricRegNo" },
{ "data": "PatientName" },
{ "data": "EntryDate" },
{ "data": "AppointmentDate" },
{ "data": "Reasons" },
{
"data": function (data, type, row, meta) {
return '<span class="btn btn-info btn-sm edit" data-toggle="modal" data-target="#modal-Edit"></span>';
//My code to retrieve and display on modal text fields starts here
$(".editA[data-target='#modal-Edit']").click(function () {
var columnHeadings = $("thead th").map(function () {
return $(this).text();
}).get();
columnHeadings.pop();
var columnValues = $(this).parent().siblings().map(function () {
return $(this).text();
}).get();
var myModal = $('#modal-Edit');
$('#AppointmentIdEdit', myModal).val(data.MatricRegNo);
$('#patientRegNoEdit', myModal).val(data.MatricRegNo);
$('.appointmentDateEdit', myModal).val(data.AppointmentDate);
$('#reasonsEdit', myModal).val(data.Reasons);
console.log("Column Values: " + data.Reasons);
myModal.modal({ show: true });
return false;
});
//My code to retrieve and display on modal text fields ends here
}
}
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel',
{
extend: 'pdfHtml5',
orientation: 'Portriat',
pageSize: 'A4'
}
]
});
table = $("#tblAppointment").DataTable();
}
});
});
});
My Modal Code:
<div class="modal fade" id="modal-Edit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Edit Appointments</h4>
</div>
@using (Html.BeginForm())
{
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label id="lblAppointmentIdEdit" class="control-label col-md-2" style="display:none;">AppointmentId:</label>
<div class="col-md-10">
<input type="text" value="" id="AppointmentIdEdit" name="AppointmentIdEdit" class="form-control appointmentIdEdit" style="display:none;" />
</div>
</div>
<div class="form-group">
<label id="lblPatientRegNoEdit" class="control-label col-md-2">RegNo:</label>
<div class="col-md-10">
<input type="text" value="" id="patientRegNoEdit" name="patientRegNoEdit" class="form-control patientRegNoEdit" readonly/>
</div>
</div>
<div class="form-group">
<label id="appointmentDateEdit" class="control-label col-md-2">Date:</label>
<div class="col-md-10">
<div class='input-group date' id='datetimepickerEdit'>
<input type='text' class="form-control datetimepickerEdit" id="appointmentDateEdit" name="appointmentDateEdit" value="" />
<span class="input-group-addon datetimepicker-addonEdit">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label id="lblReasonsEdit" class="control-label col-md-2">Reason(s):</label>
<div class="col-md-10">
<textarea rows="4" cols="50" id="reasonsEdit" name="reasonsEdit" class="form-control reasonsEdit"></textarea>
</div>
</div>
</div>
</div>
}
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" id="UpdateButton" name="UpdateButton" class="btn btn-primary update">Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div> 解决方案
(document).ready(function () { var table =
("#tblAppointment").DataTable();
("#UpdateButton").click(function () {
这篇关于如何迭代数据表检索行并在按钮单击时使用ajax显示在模式文本字段上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
