append datatable to div programatically

KramerMcBarreth

Hello !

Please excuse my english

I don't understand how to create and positioning a table programmatically.

My div is drawn by javascript function

My javascript function:

divAchat = function (parentId) {
this.init = false;
    this.div = $("<div>", {id: "divAchat"});
    this.content = $("<div>", {id: "divAchatContent"});

this.setTable = function () {
        var data = [
            {"state": "state",
                "drug": "drug",
                "priceKil2": "priceKil",
                "purity": "purity",
                "qte": "qte",
                "price": "price"
            }
        ];
        
        var table = $('#divAchatContentTable').DataTable({
            data: data,
            columns: [
                {data: 'state', title: 'State'},
                {data: 'priceKil', title: 'Price/Kilos'},
                {data: 'purity', title: 'Purity', className: "dt-body-center"},
                {render: function (data, type, row) {
                        return "<input class='t_cut'  type='text' id ='achatQte' value='00' size='3'>%";
                    },title: 'Quantity', className: "dt-body-center"},
                {render: function (data, type, row) {
                        return "<input class='t_cut'  type='text' id ='achatPrice' value='00' size='3'>%";
                    },title: 'Price', className: "dt-body-center"},
                {data: null, title: 'bt_valide', "defaultContent": "<button>Click!</button>", className: "dt-body-center"}
            ]
            ,
            "order": [[0, "asc"]],
            "searching": false,
        });
       
        $('#example tbody').on('click', 'button', function () {
            var dat = table.row($(this).parents('tr')).data();~~~~
            table.row($(this).parents('tr')).index();
            alert($("#achatQte").val());
            alert($("#achatPrice").val());
        });
        
        this.content.append($("#divAchatContentTable"));
/*
this doesn't work either
           this.content.append($(table));
*/
    }
if (!this.init) {
        this.setTable();
        this.div.append(this.content);
        $('#' + parentId).append(this.div);
        this.init = true;
    }
}

I create the div with : new divAchat(parentDiv);

But the table is nowhere to be found in the DOM
the datatable creation don't work.

I test this.content.append(table); but it don't work either.

the var table is a Datatable objet
but the selector $('#divAchatContentTable') is a HTMLDocument.

Please, help ! How to create a datatable and add it programatically to a div ?