Django Rest Framework Datatables DELETE

Question

Issue

I would like to send a list of ID's to the Django Rest Framework API url (which is the rest_framework routers default). So far everything is working up to the point of sending the ID's. When I click the delete button the DELETE call goes to 127.0.0.1:8000/api/entries/_id_/ and does not add the proper ID's that are selected for deletion.

Error Message From Server

I'm sure this was more or less obvious:

{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 %}

Matthew Hegarty · Accepted Answer · 2020-11-17 11:58:51Z

0

You need to start to break down the logic to figure out what is not working.

Look in the browser console ('network') tab to see what the DELETE request is being sent as. Is it being sent in the format you expect?
Make the DELETE call on its own. You can use curl, Postman, or (even better) a Django Rest Framework test etc to isolate just the API call on its own. Ensure this deletes the rows as expected. If you have a debugger running on the back-end, this will really speed up finding any issues. Once this is working you can debug the frontend.

Since you imply that the ids are not being added to the ajax request, you can use the browser developer tools Javascript debugger to set a breakpoint in the deletebutton click logic. Step through this and you should be able to isolate the source of the problem.

Also, just a thought, but you call pluck('ID') - should this be pluck('id') ?

answered Nov 17, 2020 at 11:58

Matthew Hegarty

4,3242 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Winkler Over a year ago

Ya doesn't help to be a one-man army over here sometimes I'm staring at an issue for weeks as I can't bounce ideas around. 1. That was the "detail: "Not found."" as the delete goes to the URL without replacing the Id variable. 2. I've been trying to use the DRF test and it's helping, good advice, but not where I'm currently stuck on. JS Debugging is also helpful, using the mouse event click breakpoint. Changing ID to id doesn't change anything but the dataObj always breaks the page for me. Is that var and selectedRows var necessary? Seems it could be done with 1.

Matthew Hegarty Over a year ago

I'll be in chat today if it helps

Collectives™ on Stack Overflow

Django Rest Framework Datatables DELETE

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related