Django с datatables bootstrap 5 pagination не работает должным образом

Я изучаю Django на примере веб-страницы. И я пытаюсь интегрировать Jquery DataTable с Bootstrap 5. Проблема в том, что у меня в БД всего 12 записей. Когда я выполняю код и возвращаю данные в jquery, таблица загружается и интерпретируется как один набор. Поэтому вместо того, чтобы показывать страницы 1 и 2 в пагинации, он показывает только страницу 1. Привожу свой код ниже

views.py

def get_recipe(request):
    if request.method == "POST":
        # all_recipes = Recipe.objects.all()
        # data = list(all_recipes.values())
        # return JsonResponse({"data": data}, safe=False)
        draw = int(request.POST.get("draw", 0))
        start = int(request.POST.get("start", 0))
        length = int(request.POST.get("length", 10))  # Default to 10 records per page
        search_value = request.POST.get("search[value]", "")
        order_column = request.POST.get("order[0][column]", "")
        order_dir = request.POST.get("order[0][dir]", "asc")

        page = start // length

        # Filter and retrieve data based on parameters (replace with your logic)
        total_data_count = Recipe.objects.all().count()

        filtered_data_count = total_data_count

        data = Recipe.objects.all()[page * length : (page + 1) * length]

        # Convert data to a list of dictionaries (or use a serializer)
        data_list = list(data.values())

        # Prepare the response data
        response = {
            "draw": draw,
            "recordsTotal": total_data_count,
            "recordsFiltered": total_data_count,
            "data": data_list,
        }

        return JsonResponse(response, safe=False)
    else:
        return JsonResponse({"status": "error", "message": "Something went wrong!!"})

Js файл

    new DataTable(vege.recipeTable, {
        ajax: {
            url: 'get-recipe',
            type: 'POST',
            "beforeSend": function (xhr) {
                xhr.setRequestHeader('X-CSRFToken', $('#csrf').find('input[name="csrfmiddlewaretoken"]').val());
            },
            processing: true,
            serverSide: true
        },
        "columns": [
            {"data": "recipe_name"},
            {"data": "recipe_description"},
        ]
    });

Возврат данных из запроса python

{
    "draw": 0,
    "recordsTotal": 12,
    "recordsFiltered": 12,
    "data": [
        {
            "id": 7,
            "recipe_name": "test",
            "recipe_description": "asdfasdf asfdasdfasf",
            "recipe_image": "recipes/Screenshot_2023-12-11_at_7.42.08AM.jpeg"
        },
        {
            "id": 8,
            "recipe_name": "test",
            "recipe_description": "asdfasdf asfdasdfasf",
            "recipe_image": "recipes/Screenshot_2023-12-11_at_7.42.08AM_5yxJziI.jpeg"
        },
        {
            "id": 9,
            "recipe_name": "test",
            "recipe_description": "asdfasdf asfdasdfasf",
            "recipe_image": "recipes/Screenshot_2023-12-11_at_7.42.08AM_eilnh8S.jpeg"
        },
        {
            "id": 10,
            "recipe_name": "test",
            "recipe_description": "asfasfdasdfasfdasdfasfd",
            "recipe_image": "recipes/Screenshot_2023-12-11_at_7.42.08AM_p8TJAl2.jpeg"
        },
        {
            "id": 11,
            "recipe_name": "test",
            "recipe_description": "teasdfasdf asdfasfd as",
            "recipe_image": "recipes/Screenshot_2023-12-11_at_7.42.08AM_mgCJgot.jpeg"
        },
        {
            "id": 12,
            "recipe_name": "test",
            "recipe_description": "test dasfas ",
            "recipe_image": "recipes/Screenshot_2023-12-11_at_7.42.08AM_qD0CGrI.jpeg"
        },
        {
            "id": 13,
            "recipe_name": "test",
            "recipe_description": "test dasfas ",
            "recipe_image": "recipes/Screenshot_2023-12-11_at_7.42.08AM_jqYnqLr.jpeg"
        },
        {
            "id": 14,
            "recipe_name": "test",
            "recipe_description": "asdasdfa asfdasdf",
            "recipe_image": "recipes/Screenshot_2023-12-11_at_7.42.08AM_EnRS1qm.jpeg"
        },
        {
            "id": 15,
            "recipe_name": "Test reset",
            "recipe_description": "Test description",
            "recipe_image": "recipes/409197989_340292352058002_1286711101528141987_n.jpg"
        },
        {
            "id": 16,
            "recipe_name": "Test new reset",
            "recipe_description": "Test new reset desc",
            "recipe_image": "recipes/409197989_340292352058002_1286711101528141987_n_lige3f8.jpg"
        }
    ]
}

Я использую следующие версии

Django - 5.0.4

Python - 3.12

Jquery - 3.7

Ремень - 5

Как я могу исправить эту проблему?

Заранее спасибо.

Вернуться на верх