Как предотвратить дефолт в DataTable при нажатии на кнопку удаления? - PullRequest
1 голос
/ 18 октября 2019

Я сгенерировал 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
...