Я сгенерировал DataTable из данных базы данных. В моих строках у меня есть метод перенаправления на детали о совпадении, также в последний тд в каждой строке у меня есть кнопка удаления, которая вызывает подтверждение загрузочной коробки, чтобы удалить совпадение из db и DataTable. Когда я нажимаю кнопку «Удалить», он перенаправляет меня к деталям, и мой загрузочный ящик можно увидеть только на короткое время, прежде чем он будет перенаправлен. Как я могу предотвратить это?
Я пытался добавить e.preventDefault () и e.stopPropagation (), но это не сработало.
<table class="table table-hover text-center" id="matches">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Wynik</th>
<th scope="col"></th>
<th scope="col">Usuń</th>
</tr>
</thead>
<tbody>
@{string id = User.Identity.GetUserId();}
</tbody>
</table>
var table = $("#matches").DataTable({
language: {
processing: "Przetwarzanie...",
search: "Szukaj:",
lengthMenu: "Pokaż _MENU_ pozycji",
info: "Pozycje od _START_ do _END_ z _TOTAL_ łącznie",
infoEmpty: "Pozycji 0 z 0 dostępnych",
infoFiltered: "(filtrowanie spośród _MAX_ dostępnych pozycji)",
infoPostFix: "",
loadingRecords: "Wczytywanie...",
zeroRecords: "Nie znaleziono pasujących pozycji",
emptyTable: "Brak danych",
paginate: {
first: "Pierwsza",
previous: "Poprzednia",
next: "Następna",
last: "Ostatnia"
},
aria: {
sortAscending: ": aktywuj, by posortować kolumnę rosnąco",
sortDescending: ": aktywuj, by posortować kolumnę malejąco"
}
},
createdRow: function (row, data, match) {
if (data.left.id == idUser) {
if (data.scoreLeft > data.scoreRight)
$(row).addClass('table-success');
else if (data.scoreLeft < data.scoreRight)
$(row).addClass('table-danger');
else
$(row).addClass('table-primary');
}
else if (data.right.id == idUser) {
if (data.scoreRight > data.scoreLeft)
$(row).addClass('table-success');
else if (data.scoreLeft > data.scoreRight)
$(row).addClass('table-danger');
else
$(row).addClass('table-primary');
}
},
ajax: {
url: "/api/match",
dataSrc: ""
},
columns: [
{
render: function (data, type, match) {
if (match.left.id == idUser) {
return match.left.name + " " + match.left.surname;
}
else
return match.right.name + " " + match.right.surname;
}
},
{
render: function (data, type, match) {
if (match.left.id == idUser) {
return match.scoreLeft + " : " + match.scoreRight;
}
else
return match.scoreRight + " : " + match.scoreLeft;
}
}, {
render: function (data, type, match) {
if (match.left.id == idUser) {
return match.right.name + " " + match.right.surname;
}
else
return match.left.name + " " + match.left.surname;
}
}, {
data: "id",
render: function (data) {
return "<button class='btn-warning js-delete' data-match-id=" + data + ">Usun</button>";
}
}
]
});//creating datatable
$("#matches").delegate("tbody tr td button", "click", ".js-delete", function (e) {
e.preventDefault();
console.log("usun");
var button = $(this);
bootbox.confirm({
message: "Czy na pewno chcesz usunąć ten mecz?",
buttons: {
confirm: {
label: 'Tak',
className: 'btn-success'
},
cancel: {
label: 'Nie',
className: 'btn-danger'
}
},
callback: function (result) {
if (result) {
$.ajax({
url: "/api/match/delete/" + button.attr("data-match-id"),
method: "DELETE",
success: function () {
button.parents("tr").remove();
}
});
}
}
});
});//button delete event
$('#matches tbody').on('click', 'tr', function (e) {
e.preventDefault();
console.log("wybrano");
var data = table.row(this).data();
window.location.href = "/Comment/Index?matchId=" + data.id;
});//Redirect th event