Учитывая вашу конечную цель (редактируемый DataTable), я позволю себе предложить несколько улучшений для вашего приложения, так что вам не нужно действительно нужно получить идентификатор строки, по которой щелкнули, и выполнить весь HTMLтяжелая работа самостоятельно.
- Вместо использования внешнего AJAX-вызова для заполнения ваших DataTables, я бы рекомендовал использовать встроенную
ajax опцию
$("#posts").DataTable({
//specify URL for AJAX-call that retrieves table data in format of array of arrays or array of objects
//where each element/property corresponds to table columns, ajax.dataSrc property should be set to ''
//if data array encompassed into 'data' property (default format), 'dataSrc' can be ommitted
...
ajax: {
url: "/getdata"
dataSrc: ''
}
})
- используйте параметр
columns.render для изменения содержимого ячейки, чтобы оно отображалось в виде значка или раскрывающегося меню
dataTable = $("#posts").DataTable({
...
columns: [
{ data: "id", title: "Id" },
{
data: "status",
title: "Status",
//render status as a badge, having class, based on status value
render: data => `<span class="badge ${data == "posted" ? "badge-success" : "badge-secondary"}">${data}</span>`
}
...
]
})
- и существенный точка - оставьте метку номера строки в раскрывающемся элементе при рендеринге, чтобы впоследствии вы могли получить доступ к этому значению при необходимости редактировать / удалять строку таблицы
$("#posts").DataTable({
...
columns: [
...
{
data: null,
title: "Actions",
//render 'Actions' column as a drop-down menu wrapper,
//appending 'row' attribute with corresponding row number
//as a value
render: (data, type, row, meta) => `
<div class="dropdown" row="${meta.row}">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item edit-row"><i class="icon-pencil"></i>Edit</a>
<a href="#" class="dropdown-item delete-row"><i class="icon-bin"></i>Delete</a>
</div>
</div>
`
}
]
});
- используйте вышеуказанные номера строк, чтобы изменить строку целевой таблицы, используя методы API DataTables (например,
row().remove() для удаления), я буду использовать самый простой пример (удаление строки в переднемконец), так как вы не поделились подробностями о том, хотите ли выodify как внутренних, так и внешних данных или только последних
//delete-row callback as an example of how to use row attribute to modify necessary table row
$("#posts").on("click", ".delete-row", function () {
//grab dropdown wrapper and obtain row number
const rowNumber = $(this)
.closest(".dropdown")
.attr("row");
//delete corresponding table row and re-draw the table
dataTable.row(rowNumber).remove();
dataTable.draw();
});
Полная работа DEMO вашего примера проекта может быть найдена здесь или выможете просмотреть эту демонстрацию в Dev Tools вашего браузера, используя эту ссылку .
PS , если по какой-то причине вы все же решили продолжить свой подход, вы можетезапрос этот пост (который очень похож на ваш) о способе получения свойств модели данных (в частности, 'id') строки, по которой щелкнули