Table is not rendering correctly when after dynamic div modification

The_aLiEn

Hi all,

I've just started to work with this magnificent tool and I'm foolin' around. So, if there's already a solution or any use-case technique, I'm not just aware of.

That being said, here is my problem:

I have an empty container like this:

<div id="container"></div>

and I'm modifying its contents on a tab control's onChangeTab event:

                        // table container
                        var tableContainer = $("#container");

                        // clear all contents
                        tableContainer.empty();

                        if (data.length) {
                            // templates
                            var content =
                                "<div id=\"block_~I~\">" +
                                    "<input type=\"hidden\" id=\"~I~_ID\" value=\"~ID~\" /> " +
                                    "<table id=\"table_~I~\" class=\"striped responsive-table dataTable\">" +
                                        "<thead>" +
                                            "<tr>" +
                                                "<th>Name</th>" +
                                            "</tr>" +
                                        "</thead>" +
                                    "</table>" +
                                "</div>";

                            $.each(data, function(idx, val) {
                                    // create content
                                    var newContent = content.replaceAll("~ID~", val).replaceAll("~I~", idx);
                                    tableContainer.append(newContent);

                                    // initialize data table
                                    var dataTableDom = "table_~I~".replaceAll("~I~", idx);

                                    var dtColumns = new Array();

                                    dtColumns.push({
                                        "data": "Name"
                                    });

                                    ConfigureDataTable({
                                        domObjectName: dataTableDom,
                                        columns: dtColumns,
                                        // other stuff
                                    });
                                });
                        }

ConfigureDataTable method is nothing much but an encapsulator of a generic table generator with simply

return domObj.DataTable({
// with defaults extended
});

and the extended defaults are

$.extend($.fn.dataTable.defaults,
    {
        destroy: true,
        processing: false,
        autoWidth: false,
        serverSide: true
    });

and the replaceAllis just a simple recursive stringReplace code.

Now, my problem is, after modifying the container div element as above and creating the table, the result is like this:

As you can see length elements of table are not present. Dev tools dont show any scripting error. When I call the creator method on document.ready or equvalient, there is no problem, the table renders perfectly.

What I am missing? How do I solve this?

Thanks in advance.

Hasan.

colin

Hi @The_aLiEn ,

There's a lot going on there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

The_aLiEn

Hi @colin,

Here is a quick preview of what is happening:

http://live.datatables.net/doqavujo/2/edit

The materialize.css is causing the problem. If linked, it cannot create wrapper for select controls after document is loaded and content is changed next.

This is correctly generated wrapper:

<div class="select-wrapper">
    <input class="select-dropdown dropdown-trigger" readonly="true" data-target="select-options-2c9cc23f-2b8e-04ee-d59a-ffe1eb6bdf29" type="text">
    <ul id="select-options-2c9cc23f-2b8e-04ee-d59a-ffe1eb6bdf29" class="dropdown-content select-dropdown" tabindex="0">
        <li id="select-options-2c9cc23f-2b8e-04ee-d59a-ffe1eb6bdf290" tabindex="0" class="selected">
            <span>10</span>
        </li>
        <li id="select-options-2c9cc23f-2b8e-04ee-d59a-ffe1eb6bdf291" tabindex="0">
            <span>25</span>
        </li>
        <li id="select-options-2c9cc23f-2b8e-04ee-d59a-ffe1eb6bdf292" tabindex="0">
            <span>50</span>
        </li>
        <li id="select-options-2c9cc23f-2b8e-04ee-d59a-ffe1eb6bdf293" tabindex="0">
            <span>100</span>
        </li>
    </ul>
    <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
        <path d="M7 10l5 5 5-5z"/>
        <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
    <select name="courseTable_length" aria-controls="courseTable" class="" tabindex="-1">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
    </select>
</div>

This is the other one, no wrapper at all:

<select name="table_0_length" aria-controls="table_0" class="">
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
</select>

The site is an ASP.Net MVC site. All CSSes are located at "head", all Scripts are located just before "</body>". After linked scripts, I render pages' "scripts" sections. Table initialization on that "scripts" parts working just fine.

allan

Matertialize is automatically converting select elements on load, but you need to tell it about any new ones that are dynamically added: https://materializecss.com/select.html .

$('select').formSelect();

can be used for that: http://live.datatables.net/doqavujo/4/edit (ugly - but functional!).

Allan

The_aLiEn

Me, a backend guy wandering frontend... Missed the lines in documentation, my mistake. Thank you @allan. This was spot on!