Как получить объект DataTable строку и вывести в модальное диалоговое окно для редактирования
У меня есть datatable, я хочу иметь возможность отображать диалоговое окно для редактирования с соответствующими значениями строк с помощью Jquery, я попробовал код ниже, но безуспешно.
Что я уже пробовал:
Мой Datatble:
<pre> <table id="tblAppointment" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Matric/RegNo</th>
<th>Patient's Name</th>
<th>Visit Date</th>
<th>Appointment Date</th>
<th>Reason(s)</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td class="hidden-xs">
@item.MatricRegNo
</td>
<td class="hidden-xs">
@item.PatientName
</td>
<td class="hidden-xs">
@item.EntryDate
</td>
<td class="hidden-xs">
@item.AppointmentDate
</td>
<td class="hidden-xs">
@item.Reasons
</td>
<td>
@*<input type="button" value="+Add New" class="btn btn-danger" data-toggle="modal" data-target="#modal-default" style="float:right; margin:10px 10px 10px 0;" />*@
<span class="btn btn-info btn-sm edit" style="cursor:pointer;" data-toggle="modal" data-target="#modal-Edit"></span>
</td>
</tr>
}
</tbody>
</table>
Мой модальный диалог:
<pre> <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" style="display:none;">
<label id="lblAppointmentIdEdit" class="control-label col-md-2">AppointmentId:</label>
<div class="col-md-10">
<input type="text" value="" id="AppointmentIdEdit" name="AppointmentIdEdit" class="form-control appointmentIdEdit" />
</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" />
</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>
</div>
</div>
Мои Функции JQuery :
<pre><script type="text/javascript">
$('.edit').on('click', function () {
var myModal = $('#modal-Edit');
var AppointmentIdEdit = $(this).closest('tr').find('td.AppointmentIdEdit').html();
var matricRegNo = $(this).closest('tr').find('td.MatricRegNo').html();
var appointmentDate = $(this).closest('tr').find('td.AppointmentDate').html();
var reasons = $(this).closest('tr').find('td.Reasons').html();
$('.appointmentIdEdit', myModal).val(AppointmentIdEdit);
$('.matricRegNoEdit', myModal).val(matricRegNo);
$('.datetimepickerEdit', myModal).val(appointmentDate);
$('.reasonsEdit', myModal).val(reasons);
myModal.modal({ show: true });
return false;
});
</script>