Django Rest Framework Datatables DELETE

Question

Kwestia

Chciałbym wysłać listę identyfikatorów do adresu URL interfejsu API Django Rest Framework (który jest domyślnym routerem rest_framework). Jak dotąd wszystko działa, aż do wysłania identyfikatorów. Po kliknięciu przycisku usuwania wywołanie DELETE przechodzi do 127.0.0.1:8000/api/entries/_id_/i nie dodaje odpowiednich identyfikatorów wybranych do usunięcia.

Komunikat o błędzie z serwera

Jestem pewien, że było to mniej więcej oczywiste:

{detail: "Not found."}
detail: "Not found."

entry_list.html

{% extends "dashboard/base.html" %}
{% load i18n %}
{% block content %}

<style>


table.dataTable tbody tr.odd.selected {
 background-color:#acbad4
}

table.dataTable tbody tr.even.selected {
 background-color:#acbad5
}


</style>

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h2 class="text-gray-800">{% block title %}{% trans "Imported Entries" %}{% endblock %}</h2>
    <a role="button" class="btn btn-success" href="{% url 'import' %}"><i
            class="fas fa-plus-circle"></i> Import New Entires</a>
</div>

<button id="countbutton">Count rows</button>
<button id="deletebutton">Delete rows</button>

<!-- Content Row -->
<div class="row">
    <div class="col-md-12">
        <table id="entrytable"
               class="table-hover table display table-bordered"
               align="center"
               style="width:100%">
            <thead>
            <tr role="row">
                <th>id</th>
                <th>date</th>
                <th>amount</th>
                <th>price</th>
                <th>fee</th>
                <th>entry_type</th>
                <th>reg_fee</th>
                <th>transaction_id</th>
                <th>trade</th>
                <th>symbol</th>
                <!--                <th>created_by</th>-->
            </tr>
            </thead>

        </table>
    </div>
</div>

{% endblock %}


{% block js %}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>


<!--https://datatables.net/examples/server_side/select_rows.html-->
<!--<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"/>-->

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>


<script>

$(document).ready(function() { // var selected = []; var table = $('#entrytable').DataTable({
        "order": [[ 0, "desc" ]],
        "processing": true,
        "ajax": "/api/entries/?format=datatables",
        "columns": [
            {
                "data": "id",
                "render": function ( data, type, row, meta ) {
                    return '<a type="button" class="" target="_blank" href="' + data + '">' + data + ' </a>';
                }
            },
            {"data": "date"},
            {"data": "amount"},
            {"data": "price"},
            {"data": "fee"},
            {"data": "entry_type"},
            {"data": "reg_fee"},
            {"data": "transaction_id"},
            {
                "data": "trade",
                "render": function ( data, type, row, meta ) {
                    if (data) {
                      return '<a type="button" target="_blank" class="" href="/trade/' + data + '"> ' + data + ' </a>';
                    } else {
                      // show nothing
                    }
                },
                "defaultContent": "",
            },
            {
                "data": "symbol",
                "defaultContent": "",
            },
           // {"data": "created_by"},
            ],


    });

    $('#entrytable tbody').on( 'click', 'tr', function () { $(this).toggleClass('selected');
    } );

    $('#countbutton').click( function () { alert( table.rows('.selected').data().length +' row(s) selected' ); } ); $('#deletebutton').click( function () {
        var selectedRows = table.rows({"selected": true});

        var dataObj = {
            // parse selectedRows to get object ids
            table.rows({"selected":true}).data().pluck('ID');
        }

        $.ajax({
            "url": '/api/entries/_id_/',
            "type": 'DELETE',
            "beforeSend": function(xhr) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token|escapejs }}");
            },
            "contentType": 'application/json',
            "data": dataObj,
            "success": function (data, status, xhr) {
                // remove the selected rows from the view
                table.row('.selected').remove().draw( false );
            }
        })
    } );


} );



</script>

{% endblock %}

Answer 1

Musisz zacząć łamać logikę, aby dowiedzieć się, co nie działa.

1. Spójrz na kartę konsoli przeglądarki („sieć”), aby zobaczyć, w jakiej postaci wysyłane jest żądanie DELETE. Czy jest wysyłany w oczekiwanym formacie?

2. Wykonaj samodzielnie wywołanie DELETE. Możesz użyć curl, Postman lub (nawet lepiej) testu Django Rest Framework itp., Aby samodzielnie izolować tylko wywołanie API. Upewnij się, że spowoduje to usunięcie wierszy zgodnie z oczekiwaniami. Jeśli masz debugera działającego na zapleczu, naprawdę przyspieszy to znajdowanie wszelkich problemów. Gdy to zadziała, możesz debugować frontend.

Ponieważ sugerujesz, że identyfikatory nie są dodawane do żądania Ajax, możesz użyć debugera JavaScript narzędzi programistycznych przeglądarki, aby ustawić punkt przerwania w deletebuttonlogice kliknięcia. Przejdź przez to i powinieneś być w stanie zidentyfikować źródło problemu.

Tylko myśl, ale dzwonisz pluck('ID')- czy tak powinno być pluck('id')?