Django Rest Framework Datatables DELETE

Question

Problème

Je voudrais envoyer une liste d'identifiants à l'URL de l'API Django Rest Framework (qui est la valeur par défaut des routeurs rest_framework). Jusqu'à présent, tout fonctionne jusqu'au point d'envoyer les ID. Lorsque je clique sur le bouton de suppression, l'appel DELETE est acheminé 127.0.0.1:8000/api/entries/_id_/et n'ajoute pas les identifiants appropriés sélectionnés pour la suppression.

Message d'erreur du serveur

Je suis sûr que c'était plus ou moins évident:

{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

Vous devez commencer à décomposer la logique pour comprendre ce qui ne fonctionne pas.

1. Regardez dans l'onglet de la console du navigateur («réseau») pour voir en quoi la demande DELETE est envoyée. Est-il envoyé dans le format que vous attendez?

2. Effectuez l'appel DELETE seul. Vous pouvez utiliser curl, Postman ou (mieux encore) un test Django Rest Framework, etc. pour isoler uniquement l'appel d'API. Assurez-vous que cela supprime les lignes comme prévu. Si vous avez un débogueur en cours d'exécution sur le back-end, cela accélérera vraiment la recherche de problèmes. Une fois que cela fonctionne, vous pouvez déboguer le frontend.

Puisque vous impliquez que les identifiants ne sont pas ajoutés à la requête ajax, vous pouvez utiliser le débogueur Javascript des outils de développement du navigateur pour définir un point d'arrêt dans la deletebuttonlogique de clic. Suivez cette étape et vous devriez être en mesure d'isoler la source du problème.

Aussi, juste une pensée, mais vous appelez pluck('ID')- est-ce que cela devrait être pluck('id')?