Getting JSON data for a Bootstrap Table from a Django server

Question

I am trying to get data for the Bootstrap table from Django server as Json responce:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>

    <table class="table table-striped" id="table"
        data-toggle="table"
        data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
        #data-url="http://totoshick.pythonanywhere.com/getdata"
        data-side-pagination="server">
        <thead>
            <tr>
                <th data-field="id">#</th>
                <th data-field="name">Report name</th>
                <th data-field="description">Description</th>
                <th data-field="link">Link</th>
                <th data-field="start_date">Last launch</th>
            </tr>
        </thead>
    </table>

Data from Bootstrap Table example: https://examples.wenzhixin.net.cn/examples/bootstrap_table/data

My data: http://totoshick.pythonanywhere.com/getdata

The table successfully shows the data from example, but not my ones - "No matching records found". Local varianat of my data:

{
  "total": 5,
  "totalNotFiltered": 5,
  "rows": [
    {
      "id": 1,
      "name": "name1",
      "description": "descr1",
      "link": "link1",
      "start_date": "2019-09-26T14:04:18Z"
    },
    {
      "id": 2,
      "name": "name2",
      "description": "descr2",
      "link": "link2",
      "start_date": "2019-09-26T14:04:37Z"
    },
    {
      "id": 3,
      "name": "name3",
      "description": "descr3",
      "link": "link3",
      "start_date": "2019-09-26T14:04:50Z"
    },
    {
      "id": 4,
      "name": "name4",
      "description": "descr4",
      "link": "link4",
      "start_date": "2019-09-26T14:05:30Z"
    },
    {
      "id": 5,
      "name": "name5",
      "description": "descr5",
      "link": "link5",
      "start_date": "2019-09-26T14:05:46Z"
    }
  ]
}

Accroding to documentation there are two types of json data BT work with. I have tried both variants (have not succeed), but my aim is server-side.

Django view.py code:

from django.http import JsonResponse
from django.forms.models import model_to_dict
from .models import Report


def send_data(request):
    reports = Report.objects.all().order_by('start_date')
    serialized_queryset = {"total": reports.count(),
                           "totalNotFiltered": reports.count(),
                           "rows": []}
    for report in reports:
        temp = model_to_dict(report)
        serialized_queryset["rows"].append(temp)

    return JsonResponse(serialized_queryset, json_dumps_params={'indent': 2}, safe=False)
    #return JsonResponse(serialized_queryset["rows"], json_dumps_params={'indent': 2}, safe=False)

Browser gets the json data correctly

I have no idea where the problem is hidden beacuse json format from example is the same as my one. Does anyone have any idea what could be going wrong?

Answer 1

The snippet you posted performs a cross-domain request from JavaScript. Cross-domain requests are possible with CORS, which has to be supported by the server-side.

The example link supports CORS, your Django application does not. If you look in Chrome debug tools, you will see a corresponding error message.