Fetch Data from database and project it on a Datatable using django/ajax

Question

I just recently learned Django/ajax/datatables. I can project my data using a {%for%} loop and im trying to do the same thing with ajax calls.

My view:

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>

Im pretty sure it kinda works this way but i just cant figure it out .

kspc1000 · Accepted Answer · 2022-03-14 09:37:10Z

1

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

So it doesn't make sense to put an ajax request inside the .DataTable() method You have to make the ajax request first:

$.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
    }

})

answered Mar 14, 2022 at 9:37

kspc1000

1548 bronze badges

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

Comments

haduki · Accepted Answer · 2022-03-14 10:29:40Z

0

thats what I came up with but still doesnt seem to do the trick all i get is an empty table .

 $.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();

answered Mar 14, 2022 at 10:29

haduki

8488 silver badges29 bronze badges

1 Comment

kspc1000 Over a year ago

uhh I think it should be var instant = JSON.parse(response)[books]; you have to parse it before being able to access it

Collectives™ on Stack Overflow

Fetch Data from database and project it on a Datatable using django/ajax

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related