Display a treetable with HTML and Freemarker

Question

I have to do a structure of tree for displaying data coming from Java. I'm using treetable plugin from jQuery and I can't get the output that I want. Here's my code.

Freemarker :

<table id="dt_basic" class="table table table-bordered table-hover" width="100%">
                    <thead>
                        <tr>
                            <#list rows.getCols() as col>
                            <th>${col.getColumnName()}</th>
                            </#list>
                        </tr>
                    </thead>
                    <tbody>
                        <#list rows.getRows() as row>
                            <#if !parent??>
                                <#assign parent = row />
                                    <tr data-tt-id="${parent[rows.getCols()[0].getColumnName()]}" data-tt-branch="true">
                                        <td>${parent[rows.getCols()[0].getColumnName()]}</td>
                                        <td colspan="${rows.getCols()?size-1}"></td>
                                    </tr>
                            <#elseif row[rows.getCols()[0].getColumnName()] != parent[rows.getCols()[0].getColumnName()]>
                                <#assign parent = row />
                                    <tr data-tt-id="${parent[rows.getCols()[0].getColumnName()]}">
                                        <td>${row[col.getColumnName()]}</td>
                                        <td colspan="${rows.getCols()?size-1}"></td>
                                    </tr>
                            </#if>


                            <tr data-tt-id="1.1" data-tt-parent-id="${row[rows.getCols()[0].getColumnName()]}">
                                <#list rows.getCols() as col>
                                    <#if col?is_first>
                                        <td>${row[col.getColumnName()]}</td>
                                    <#else>
                                    <#if col.isRightAligned()>
                                        <td name="${col.getColumnName()}" align='RIGHT'>${row[col.getColumnName()]}</td>
                                    <#else>
                                        <td name="${col.getColumnName()}">${row[col.getColumnName()]}</td>
                                    </#if>
                                    </#if>
                                </#list>
                            </tr>

                        </#list>
                    </tbody>
                </table>

jQuery

$("#dt_basic").treetable({ 
        expandable: true,
        clickableNodeNames: true,
        onNodeExpand: function() {
            $.when( this.show() ).done( function () {
                $("#dt_basic").resizableColumns('syncHandleWidths');
            });
        },
        onNodeCollapse: function() {
            $("#dt_basic").resizableColumns('syncHandleWidths');
        }
    });

    $("#dt_basic").wrap( "<div class='tableWrap'></div>" );

The issues that I'm having are very different:

First, when I create the $("#dt_basic").treetable, I get an error:

Uncaught TypeError: Cannot read property 'addChild' of undefined"

The other problem is that I can't display the view in the way that I want. It must seem like this:

Node - > All node's childs
New Node -> All new node's childs

But I'm getting:

Node - > Child
Node - > Child 
New Node - > New node child
New Node - > New node child