Django Rest Framework Datatables XÓA

Question

Vấn đề

Tôi muốn gửi danh sách các ID tới url API Django Rest Framework (là mặc định của bộ định tuyến rest_framework). Cho đến nay mọi thứ đang hoạt động cho đến thời điểm gửi ID. Khi tôi nhấp vào nút xóa, cuộc gọi DELETE sẽ chuyển đến 127.0.0.1:8000/api/entries/_id_/và không thêm ID thích hợp được chọn để xóa.

Thông báo lỗi từ máy chủ

Tôi chắc rằng điều này ít nhiều đã rõ ràng:

{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

Bạn cần bắt đầu phá vỡ logic để tìm ra những gì không hoạt động.

1. Tìm trong bảng điều khiển trình duyệt (tab 'mạng') để xem yêu cầu DELETE đang được gửi dưới dạng gì. Nó có được gửi ở định dạng bạn mong đợi không?

2. Tự thực hiện cuộc gọi DELETE. Bạn có thể sử dụng curl, Postman hoặc (thậm chí tốt hơn) thử nghiệm Django Rest Framework, v.v. để tự cô lập lệnh gọi API. Đảm bảo điều này sẽ xóa các hàng như mong đợi. Nếu bạn có một trình gỡ lỗi đang chạy trên back-end, điều này thực sự sẽ giúp tăng tốc độ tìm kiếm bất kỳ vấn đề nào. Khi điều này đang hoạt động, bạn có thể gỡ lỗi giao diện người dùng.

Vì bạn ngụ ý rằng id không được thêm vào yêu cầu ajax, bạn có thể sử dụng trình gỡ lỗi Javascript của công cụ dành cho nhà phát triển trình duyệt để đặt điểm ngắt trong deletebuttonlogic nhấp chuột. Bước qua bước này và bạn sẽ có thể cô lập nguồn gốc của vấn đề.

Ngoài ra, chỉ là một suy nghĩ, nhưng bạn gọi pluck('ID')- điều này có nên pluck('id')không?