help with creating dynamic columns

gooner

Hi, I am hoping someone can help in relation to the following discussion - https://datatables.net/forums/discussion/58385/data-from-ajax-serverside-and-dynamic-columns

PS I am very new to coding and web dev.

I have a django webpage that has two functions called ProjectResults and ChildResults, each runs a stored procedure and returns a JsonResponse of the results.

The first table is static and easy. I make an ajax call to display the table see below which consists of Name, DoorNumber and PostCode

The second table is dynamic as it runs the stored procedure with a parameter of the Name in the first table. It has a fixed column called Name but then it will have n number of columns called Child1, Child2, Child3, etc depending on the output. So it could have 'Name, Child1' for output 1 and 'Name, Child1, Child2, Child3' for output 2.

So basically I need help to dynamically display the column and data from the results of the JsonRespons of the ChildResults function - Any help will be appreciated.

This is what I have for the first table

Project();

function Project() {
$.ajax({
url: 'ProjectResults',
success: function (data) {
var aaData = data.map(function (item) {
var h = [];
h.push(item.Name); //0
h.push(item.DoorNumber); //1
h.push(item.PostCode); //2

            return h;
        });
        var html = [];
        var i = 0
        var j = 0
        var LastHeader = aaData[0][0];
        var CurrentHeader = aaData[0][0];
        var columnNames = ["Name", "Door Number", "Post Code"];
 
        html[i++] = '<div id="div_container" class="content_container">';
        html[i++] = '<table id="table_content" class="display" cellspacing="0" width="100%" >';
        html[i++] = '<thead><tr>';
        for (var j = 0; j < columnNames.length; j++) {
            html[i++] = '<th>' + columnNames[j] + '</th>';
        }
        html[i++] = '</tr></thead>';
        html[i++] = '<tbody>';
        for (var j = 0; j < aaData.length; j++) {
            html[i++] = '<tr>';
            html[i++] = '<td>' + aaData[j][0] + '</td>';
            html[i++] = '<td>' + aaData[j][1] + '</td>';
            html[i++] = '<td>' + aaData[j][2] + '</td>';
        }
        html[i++] = '</tbody></table></div></div>';
 
        $("#DivProjectResults").append(html.join(''));
 
        //var oTable =
        var oTable = $('#table_content').dataTable({
            "scrollY": 600,
            "scrollCollapse": true,
            "jQueryUI": true,
            "bPaginate": false,
            "bDeferRender": true,
            "bProcessing": true,
            "bAutoWidth": true,
            "aaSorting": [[0, "asc"]],
            "aoColumnDefs": [
                {"sClass": "center", "targets": "_all"},
            ],
 
 
 
        });
        $("#StatusProjectResults").hide();
    }
});

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

I'm not too clear on what you're trying to achieve, sorry, and I have no knowledge of Django, but this thread shows how to dynamically create tables with the Ajax data - this might set you on the right course.

Colin