Изменение структуры таблицы в html, полученной из listview и j в django

Спокойной ночи,

РЕЗЮМЕ: Когда я пытался добавить новое поле модели в html таблицу с помощью js и listview, то заголовок таблицы ДА модифицируется, но строки в ней НЕ модифицируются.

Я бы уточнил, что JS не является моей родной разработкой. Сейчас я начинаю с него.

Далее история моих попыток и коды, в исходниках ant с модификациями.

У меня есть таблица, которая формируется из объекта данных в js скрипте, и выводится в шаблоне django. Данные модели считываются из models.ListView.

Как я могу изменить его структуру???

Я пробовал делать, с одной стороны в js изменяя свойство "columns". Это ничего не меняет. Чтобы изменить заголовок таблицы, я должен изменить список html addint tr/td, но структура строк не добавляет новые поля, столбцы находятся в определенном порядке.

без модификаций: без модификаций

Например, если добавить поле 'types', которое существует в модели,

во-первых, в js :

columns: [
            {"data": "position"},
            {"data": "name"},
            {"data": "types"},
            {"data": "desc"},
            {"data": "options"},

затем, в html добавьте th в таблице:

{% extends 'list.html' %}
{% load static %}
{% block head_list %}
    <script src="{% static 'Projects/js/list.js' %}"></script>
{% endblock %}

{% block columns %}
    <tr>
        <th scope="col" style="width: 3%;">Nro</th>
        <th scope="col" style="width: 30%;">Nombre</th>
        <th scope="col" style="width: 7%;">Tipo</th>
        <th scope="col" style="width: 50%;">Descripción</th>
        <th scope="col" style="width: 10%;">Opciones</th>
    </tr>
{% endblock %}

{% block rows %}

{% endblock %}

{% block javascript %}

{% endblock %}

с изменениями: с изменениями

оригинальные коды :

JS Script:

$(function () {
    $('#data').DataTable({
        responsive: true,
        autoWidth: false,
        destroy: true,
        deferRender: true,
        ajax: {
            url: window.location.pathname,
            type: 'POST',
            data: {
                'action': 'searchdata'
            },
            dataSrc: ""
        },
        columns: [
            {"data": "position"},
            {"data": "name"},
            {"data": "desc"},
            {"data": "options"},
        ],
        columnDefs: [
            {
                targets: [-1],
                class: 'text-center',
                orderable: false,
                render: function (data, type, row) {
                    var buttons = '<a href="/erp/projects/update/' + row.id + '/" class="btn btn-warning btn-xs btn-flat"><i class="fas fa-edit"></i></a> ';
                    buttons += '<a href="/erp/projects/delete/' + row.id + '/" type="button" class="btn btn-danger btn-xs btn-flat"><i class="fas fa-trash-alt"></i></a>';
                    return buttons;
                }
            },
        ],
        initComplete: function (settings, json) {

        }
    });
});

список html:

{% extends 'list.html' %}
{% load static %}
{% block head_list %}
    <script src="{% static 'Projects/js/list.js' %}"></script>
{% endblock %}

{% block columns %}
    <tr>
        <th scope="col" style="width: 3%;">Nro</th>
        <th scope="col" style="width: 37%;">Nombre</th>
        <th scope="col" style="width: 50%;">Descripción</th>
        <th scope="col" style="width: 10%;">Opciones</th>
    </tr>
{% endblock %}

{% block rows %}

{% endblock %}

{% block javascript %}

{% endblock %}

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