如何遍历数据表检索行并在使用ajax的按钮单击上显示在模式文本字段上
[英]how to iterate through a datatable retrieve a row and display on a modal text field on button click using ajax
问题描述
我有一个装有记录的数据表，我希望能够单击行按钮，该行按钮将显示一个模式对话框，并使用Ajax对象用相应的行值填充模式文本字段。
我想如果用户单击数据表上的编辑按钮，将显示一个模态对话框以及相应的行记录，我已经在线尝试了一些研究，但是我无法执行此操作，将不胜感激
我的Ajax函数：
<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"><i class="fa fa-edit"></i></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();
}
});
});
});
我的模态代码：
<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>
0 个解决方案
如何使用数据表在单击按钮时显示带有列数据的确认模态
[英]How to display a confirmation Modal with columns data on button click using Datatables
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.