Как обновить таблицу данных с помощью вызова Ajax

У меня есть таблица, которая отображает содержимое модели всякий раз, когда кто-то обращается к URL /project_page.

< <

Я думаю, что функция реализована, и я получаю data правильно в функции успеха Ajax, но я не знаю, как "внедрить" ее в таблицу.

enter image description here

Я также хотел бы узнать, существует ли более оптимальный или питонический способ достижения этого результата.

urls.py

path('project_page_ajax/', views.project_page_ajax, name='project_page_ajax'),

views.py

@login_required
def project_page(request):
    
    context = {}
    context['nbar'] = 'projects'
    if request.method == 'POST':
        print(request.FILES)
        form = UploadFileForm(request.POST, request.FILES)
        if form.is_valid():
            file_hist = form.save(commit=False)
            file_hist.user = request.user
            # file is saved
            file_hist.save()
            file_hist_results = FileHistory.objects.all().filter(user=request.user)
            context['file_hist_results'] = file_hist_results
            print(type(context['file_hist_results']))
            return render(request, 'project_page.html', context)
        print (form.errors)
    else:
        form = UploadFileForm()
    file_hist_results = FileHistory.objects.all().filter(user=request.user)
    context['file_hist_results'] = file_hist_results
    context['form'] = form
    return render(request, 'project_page.html', context)

@login_required
def project_page_ajax(request):
    response = dict()
    if request.method == 'GET':
        file_hist_results = FileHistory.objects.all().filter(user=request.user).values()
        #response.update({'file_hist_results': file_hist_results})
        return JsonResponse({"file_hist_results": list(file_hist_results)})
    return HttpResponse('')

project_page.html (JS ЧАСТЬ)

var intervalID = setInterval(updateTable, 10000);

function updateTable()
{
    $.ajax({
        method: "GET",
        url: "/project_page_ajax/",
        success: function(data, textStatus, request) {
            console.log(data); 
        }
    });
}

project_page.html(HTML-ЧАСТЬ)

<table id="ittFileUploadTable" class="display nowrap" width="100%">
    <thead>
        <tr class="ittLineItemsTh">
        <th style="text-align:center;">File Name</th>
        <th style="text-align:center;">Submitted</th>
        <th style="text-align:center;">Updated</th>
        <th style="text-align:center;">User</th>
        <th style="text-align:center;">Action</th>
        </tr>
    </thead>
    <tbody>
        {% for histfiles in file_hist_results %}
        <tr>
        <td>{{ histfiles.filename }}</td>
        <td>{{ histfiles.uploaded }}</td>
        <td>{{ histfiles.updated }}</td>
        <td>{{ histfiles.user }}</td>
        <td>
        <button id="delete-itt-file" type="button" class="btn btn-secondary">
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
        <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"></path>
        </svg>
        </button>
        </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

этот вопрос больше связан с javascript, но вот моя идея, как вы можете решить это с помощью partial_html. Это просто идея, как вы можете сделать это, но, возможно, javascript парень придет с красивым ответом ))).
views.py

from django.shortcuts import redirect 
@login_required
def project_page(request):
    
    context = {}
    context['nbar'] = 'projects'
    if request.method == 'POST':
        print(request.FILES)
        form = UploadFileForm(request.POST, request.FILES)
        if form.is_valid():
            file_hist = form.save(commit=False)
            file_hist.user = request.user
            # file is saved
            file_hist.save()
            return redirect('project_page')
        print (form.errors)
    else:
        form = UploadFileForm()
    file_hist_results = FileHistory.objects.all().filter(user=request.user)
    context['file_hist_results'] = file_hist_results
    context['form'] = form
    return render(request, 'project_page.html', context)

@login_required
def project_page_ajax(request):
    response = dict()
    if request.method == 'GET':
        file_hist_results = FileHistory.objects.all().filter(user=request.user).values()
        return render(request, 'partial_page.html', {'file_hist_results':file_hist_results})

project_page.html

<table id="ittFileUploadTable" class="display nowrap" width="100%">
    <thead>
        <tr class="ittLineItemsTh">
        <th style="text-align:center;">File Name</th>
        <th style="text-align:center;">Submitted</th>
        <th style="text-align:center;">Updated</th>
        <th style="text-align:center;">User</th>
        <th style="text-align:center;">Action</th>
        </tr>
    </thead>
    <tbody>
        {% for histfiles in file_hist_results %}
        <tr>
        <td>{{ histfiles.filename }}</td>
        <td>{{ histfiles.uploaded }}</td>
        <td>{{ histfiles.updated }}</td>
        <td>{{ histfiles.user }}</td>
        <td>
        <button id="delete-itt-file" type="button" class="btn btn-secondary">
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
        <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"></path>
        </svg>
        </button>
        </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

partial_page.html (просто простой html не ставьте никаких тегов body или head просто создайте этот файл только с этим)

<table id="ittFileUploadTable" class="display nowrap" width="100%">
    <thead>
        <tr class="ittLineItemsTh">
        <th style="text-align:center;">File Name</th>
        <th style="text-align:center;">Submitted</th>
        <th style="text-align:center;">Updated</th>
        <th style="text-align:center;">User</th>
        <th style="text-align:center;">Action</th>
        </tr>
    </thead>
    <tbody>
        {% for histfiles in file_hist_results %}
        <tr>
        <td>{{ histfiles.filename }}</td>
        <td>{{ histfiles.uploaded }}</td>
        <td>{{ histfiles.updated }}</td>
        <td>{{ histfiles.user }}</td>
        <td>
        <button id="delete-itt-file" type="button" class="btn btn-secondary">
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
        <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"></path>
        </svg>
        </button>
        </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

js

var intervalID = setInterval(updateTable, 10000);

function updateTable()
{
    $.ajax({
        method: "GET",
        url: "/project_page_ajax/",
        success: function(response) {
            $("#ittFileUploadTable").hide(); // first hide the current table
            $("#ittFileUploadTable").append(response); // and append the data
        }
    });
}

Решение во многом зависит от того, что представляет собой ответ JSON.

HTML

Если ваш ответ - это фактический HTML-фрагмент для отображения, выглядящий примерно так:

<tr><!-- Some tds --></tr>
<tr><!-- Some tds --></tr>
<tr><!-- Some tds --></tr>
<!-- ... -->
<tr><!-- Some tds --></tr>

Тогда вы можете сделать это следующим образом:

document.querySelector("#ittFileUploadTable tbody").innerHTML = yourTemplate;

JSON

Если ваши данные являются JSON, то было бы здорово создать шаблонную функцию, подобную этой:

function fileUploadRecordTemplate(record) {
    return  `
        <td>record.filename</td>
        <td>record.uploaded</td>
        <td>record.updated</td>
        <td>record.user</td>
        <td>
            <button id="delete-itt-file" type="button" class="btn btn-secondary">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
        <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"></path>
                </svg>
            </button>
        </td>
    `;
}

И увлажняйте свой tbody следующим образом:

let output = [];
for (let record of data) output.push(fileUploadRecordTemplate(record));
document.querySelector("#ittFileUploadTable tbody").innerHTML = yourTemplate;

Скрипка

Я нашел решение!

Как посоветовал @mark_b, я использовал datatables Ajax вместо jQuery AJAX

Теперь он работает, вот мой код:

$('#ittFileUploadTable').DataTable( {
    responsive: true,
    autowidth: false,
    destroy: true,
    deferRender: true,
    ajax: {
        url: '/project_page_ajax/',
        type: 'GET',
        data: {},
        dataSrc: ""
    },
    columns: [
        {"data": "fields.filename"},
        {"data": "fields.uploaded"},
        {"data": "fields.updated"},
        {"data": "fields.user"},
        {"data": "pk"},
    ],
    columnDefs: [
        { className: 'text-center', targets: [1] },
        {
            targets: [0],
            class: 'text-center',
            orderable: false,
            render: function (data, type, row) {
                var buttons = '<a href="/media/'+data+'" target="_blank">'+data+'</a>';
                return buttons;
            }
        },
        {
            targets: [-1],
            class: 'text-center',
            orderable: false,
            render: function (data, type, row) {
                var buttons = '<form method="post" action="delete_file/'+data+'/"><button type="submit" class="btn btn-danger"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="white" class="bi bi-trash-fill" viewBox="0 0 16 16"><path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/></svg></button></form>';
                return buttons;
            }
        },
    ],
    order: [
        [0, 'asc']
    ],
    "pagingType": "numbers",
    dom: 'rt'
});
Вернуться на верх