Я хотел бы показать текстовое поле ввода, как в примере здесь https://www.jqueryscript.net/table/table-editing-creation-bootstable.html при нажатии кнопки, используя jQuery Я использую jQuery datatable. Вот мой стол пока. Однако jQuery не работает с моими данными jQuery. Я думаю, это потому, что таблица еще не загружена, но я не уверен.
Вот моя таблица
<div class="dvScroll">
<div style="width:100%; margin:0 auto" class="tablecontainer">
<table class="table table-hover table-bordered" id="myDatatable">
<thead>
<tr>
<th>Armario</th>
<th>Cajon</th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot class="add-table-footer">
<tr>
<td colspan="4">
<div>
@using (Html.BeginForm("Anadir", "gestiondeubicaciones", FormMethod.Post))
{
<div class="form-row">
<div class="col-md-5 mb-3">
@Html.TextBoxFor(a => a.armario, new { @class = "form-control" })
@Html.ValidationMessageFor(a => a.armario)
</div>
<div class="col-md-5 mb-3">
@Html.TextBoxFor(a => a.cajon, new { @class = "form-control" })
@Html.ValidationMessageFor(a => a.cajon)
</div>
<div class="col-md- mb-3">
<button class="add-btn-table"><i class="material-icons-add" title="Crear nuevo">add_box</i></button>
</div>
</div>
}
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
Вот мой jquery, который заполняет таблицу.
<style>
tr.even {
background-color: #F5F5F5 !important;
}
</style>
@section Scripts{
<script type="text/javascript" charset="utf8" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script>
$(document).ready(function () {
var oTable = $('#myDatatable').DataTable({
"ajax": {
"url": '/gestiondeubicaciones/GetEmployees',
"type": "get",
"datatype": "json"
},
"columns": [
{ "data": "armario", "autoWidth": true }, /* index = 0 */
{ "data": "cajon", "autoWidth": true }, /* index = 1 */
{
"data": "ubicacion_id", "width": "50px", "render": function (data) {
return '<a id="edit' + data + '" class="edit" href="#"><i class="material-icons" title="Editar">edit</i></a>' +
'<a id="editCancel' + data + '" style="display: none;" class="editCancel" href="#"><i class="material-icons" title="Anular">cancel</i></a>' + /* index = 2 */
'<a class="popup" href="/gestiondeubicaciones/Eliminar/' + data + '"><i class="material-icons" title="Eliminar">delete</i></a>';
}
}
],
'columnDefs': [{
'targets': [2], /* column index */
'orderable': false, /* true or false */
}]
})
$('.tablecontainer').on('click', 'a.popup', function (e) {
e.preventDefault();
OpenPopup($(this).attr('href'));
})
function OpenPopup(pageUrl) {
var $pageContent = $('<div/>');
$pageContent.load(pageUrl, function () {
$('#popupForm', $pageContent).removeData('validator');
$('#popupForm', $pageContent).removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');
});
$dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
.html($pageContent)
.dialog({
draggable: false,
autoOpen: false,
resizable: false,
model: true,
title: 'Gestion de ubicaciones',
height: 550,
width: 600,
close: function () {
$dialog.dialog('destroy').remove();
}
})
$('.popupWindow').on('submit', '#popupForm', function (e) {
var url = $('#popupForm')[0].action;
$.ajax({
type: "POST",
url: url,
data: $('#popupForm').serialize(),
success: function (data) {
if (data.status) {
Notify("Success");
}
}
})
e.preventDefault();
})
$dialog.dialog('open');
}
})
</script>
}
jquery для пользовательского интерфейса
<script>
$('table').SetEditable({
$addButton: $('#but_add')
})
$('table').SetEditable({
$addButton: $('#but_add'),
columnsEd: null
})
$('table').SetEditable({
onEdit: function () { },
onDelete: function () { },
onBeforeDelete: function () { },
onAdd: function () { }
})
</script>
Мой вопрос: почему jQuery для пользовательского интерфейса не работает с jQuery, который заполняет таблицу. Спасибо за любую помощь.