Data not showing up when using column with id containing a .

stubrown

Whenever a table is initialized with a column with data field containing a . in the string, that column cannot display any data.
Code (js): In this case, Test2 column will only display default value of -

function initialize_table(){
    temp_data = [
        {
            'test_column':'test123',
            'test.column':'test1234'
        }
    ]
    editor_columns = [
        {
            data: "test_column",
            title: "Test1",
            defaultContent: "-",
        },
        {
            data: "test.column",
            title: "Test2",
            defaultContent: "-",
        }
    ];
    $("#example_table").dataTable({
        columns: editor_columns,
        paging: true,
        searching: true,
        pageLength: 25,
        scrollX:true,
        ordering: true,
        language: {
            search: "Filter:",
        },
        data:temp_data,
        order: [[0, "asc"]],
    });
    $("#example_table").DataTable()
}

$(document).ready(function () {
    initialize_table()
});

Code that displays correctly

function initialize_table(){
    temp_data = [
        {
            'test_column':'test123',
            'test|column':'test1234'
        }
    ]
    editor_columns = [
        {
            data: "test_column",
            title: "Test1",
            defaultContent: "-",
        },
        {
            data: "test|column",
            title: "Test2",
            defaultContent: "-",
        }
    ];
    $("#example_table").dataTable({
        columns: editor_columns,
        paging: true,
        searching: true,
        pageLength: 25,
        scrollX:true,
        ordering: true,
        language: {
            search: "Filter:",
        },
        data:temp_data,
        order: [[0, "asc"]],
    });
    $("#example_table").DataTable()
}

$(document).ready(function () {
    initialize_table()
});

HTML code:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script
  src="https://code.jquery.com/jquery-3.6.1.js"
  integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
  crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<table id="example_table" class="table table-hover hover table-bordered stripe display nowrap" style="width:100%">
</table>
<script src="/static/js/test_page.js?v={{js_version}}"></script>

There are no errors when trying to initialize with the column w/ a period, also it works fine if the column label contains a period, but breaks only when the internal id contains a period. Not sure if a datatable specific issue, or a quirk with html
Debug code: https://debug.datatables.net/etewip

kthorngren

The period is used to handle nested data structures. See the Types section of the columns.data docs for details. Also see this example. You will need to escape the . with backslashes to use the period as part of the object key. Here is an example using your above code snippet:
http://live.datatables.net/holekuya/1/edit

Kevin

stubrown

Thanks, I was running into this issue while parsing nested dictionaries and using . to separate the nested keys, didn't realize that it could cause an issue