Modify the structure of a table in html provided from a listview and j in django

Good night,

RESUME: When I tried add a new field of the model in the html table with js and listview, the header of the table YES is modified, but the rows of it NOT are modified.

I would clarify that JS is not my native develop. now I am starting with it.

Then, the history of my attempts and the codes, in the source ant with the modifications.

I have a table that is sourcing from a data object in js script, and render in a template of django. The data of the model is read from models.ListView.

How I can to modify the structure of it???

I have tried to do, on the one hand in the js changing the "columns" property. It not modify nothing. To modify the header of the table, I have to modify the list html addint tr/td but the rows structure not add the new fields, the colums are in distinct order.

without modifications: without modifications

for example, if add the field 'types' that exists in model,

first, in the js :

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

then, in the html add a th in the table:

{% 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 %}

with modifications: with modifications

original codes :

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) {

        }
    });
});

list 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 %}

Back to Top