從數據庫中獲取數據並使用 django/ajax 將其投影到數據表上

Question

我最近才學習 Django/ajax/datatables。 我可以使用 {%for%} 循環投影我的數據，我試圖用 ajax 調用做同樣的事情。

我的看法：

def is_ajax(request):
    return request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'

def getfromServer(request):
    if is_ajax(request=request) and request.method == "GET":
        books= Book.objects.all()
        bookserial = serializers.serialize('json', books)
        return JsonResponse(bookserial, safe=False)
    return JsonResponse({'message':'Wrong validation'})

index.html

<div class="container">
    <table id="books" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Book</th>
                <th>Author</th>
                <th>Genre</th>
                <th>Date Publishedd</th>
                <th>Copies</th>
            </tr>
        </thead>
     </table>
</div>

<script>

        $(document).ready(function() {
            $('#books').DataTable({
                ajax: {
                    type: "GET",
                    datatype : 'json',
                    url: 'views/getfromServer',
                },
                columns: [
            { data: 'name' },
            { data: 'author' },
            { data: 'genre' },
            { data: 'pub_date' },
            { data: 'copies' },
           ]
            });
</script>

我很確定它有點像這樣工作，但我就是想不通。

Answer 1

jQuery DataTable is a powerful and smart HTML table enhancing plugin provided by jQuery JavaScript library

因此，將 ajax 請求放入.DataTable()方法中是沒有意義的。您必須先發出 ajax 請求：

$.ajax({
    type: "GET",
    datatype : 'json',
    url: 'views/getfromServer',
    success: function (result) { // result is the response you get from the server if successful
        // Use the data in result to write the values to your html table respectively here
    }
    error: function (err) {
        // handle error
    }

})

Answer 2

這就是我想出的，但似乎仍然沒有成功，我得到的只是一張空桌子。

 $.ajax({
        type: "GET",
        datatype : 'json',
        url: "views/getfromServer", // "{% url 'index' %}"
        success: function (response) {
            var instant = JSON.parse(response[books]);
            
            for book in books {
                var fields= instant[book]["fields"];
                $("#books tbody").prepend(
                    `<tr>
                        <td>${fields["name"]||""}</td>
                        <td>${fields["author"]||""}</td>
                        <td>${fields["genre"]||""}</td>
                        <td>${fields["pub_date"]||""}</td>
                        <td>${fields["copies"]||""}</td>
                    </tr>`
                )
            }

        },
        error: function (response) {
            alert(response["responseJSON"]["error"]);
        }
    
    })
    $(document).ready(function() {
        $('#books').DataTable();