How to apply DataTables responsive to a table generated from a javascript file?

Rafa.el

Hi! I'm new here and I would like to know: how to apply DataTables to a table generated from a javascript file?

I've made a div in .cshtml file with an ID to load the table that is created in the .js file.

<div id="orderdetailsItems">
        @*table is generated here*@
</div>

here is my .js code to generate the table:

function GeneratedItemsTable() {
    if (Documento.Movimentacoes.length > 0) {
        var $table = $('<table id="example" class="table tableResponsive display responsive">');
        var $thead = $('<thead/>');
        var $rowH = $('<tr/>');
        $rowH.append('<th></th>');
        $rowH.append('<th></th>');
        $rowH.append('<th></th>');
        $rowH.append('<th></th>');
        $rowH.append('<th></th>');
        $rowH.append('<th></th>');
        $thead.append($rowH);
        var $tbody = $('<tbody/>');
        $.each(Documento.Movimentacoes, function (i, val) {
            var $newRow = $('#mainrow').clone().removeAttr('id');
            //$('.idMovimentacao', $newRow).val(val.IdMovimentacao);
            $('.setor', $newRow).val(val.idSetor);
            $('.tipoMovimentacao', $newRow).val(val.TipoMovimentacao);            
            $('.dataMovimentacao', $newRow).addClass('CalendarDate').val(val.DataMovimentacaoString);
            $('.diasAnalise', $newRow).val(val.DiasAnalise);
            $('.despacho', $newRow).val(val.Despacho);
            //Replace add button with remove button
            $('#add', $newRow).addClass('remove').val('Remove').removeClass('btn-success').addClass('btn-danger').addClass('movimentacao').attr('data-movimentacao', val.IdMovimentacao);
            //$('.idMovimentacao', $newRow).val(val.IdMovimentacao);
            //remove id attribute from new clone row
            $('#novoIdSetor,#novoIdTipoMovimentacao,#novoDataMovimentacao,#novoDiasAnalise,#novoDespacho', $newRow).removeAttr('id');
            $('span.error', $newRow).remove();
            //append clone row
            $tbody.append($newRow);

        });

        $table.append($thead);
        $table.append($tbody);

        $('#orderdetailsItems').append($table);

        //clear select data
        $('#novoIdSetor').val('');
        $('#novoIdTipoMovimentacao,#novoDiasAnalise').val('0');
        $('#novoDataMovimentacao,#novoDespacho').val('');
        $('#orderItemError').empty();

        console.log("current", Documento.Movimentacoes);
    }
}

and my _layout file I did this:

$(document).ready(function () {
       $('.tableResponsive').DataTable();
});

the table is generated in my page, as you can see in the attached picture, but DataTable is not applied and I don't know why...
could someone help me, please?

allan

Just call $().DataTable() after your put the table into the document - in the case above around like 37.

Allan

Rafa.el

Thank you, Allan! It worked!
I called $('.tableResponsive').DataTable(); after put the table as you mentioned and worked fine! Thanks!

Rafa.el

EDIT: I had a problem but it was my fault. It is working great!

allan

Thanks for posting back. Good to hear you have it working now.

Allan