Ajax DataTable not showing values for field names containing dots (.)

Question

My ajax DataTable response is like this but it is not showing fieldname value in browser.

I am using Laravel as backend. My ajax DataTable is not showing field name like brands.name value, means if the field name contains a . then it is not showing value.

{
        "draw": 1,
        "iTotalRecords": 4,
        "iTotalDisplayRecords": 4,
        "aaData": [{
            "models.id": 2,
            "brands.name": "Maruti",
            "models.name": "Maruti",
            "action": "

"
        }, {
            "models.id": 2,
            "brands.name": "Maruti",
            "models.name": "Maruti",
            "action": "

"
        }, {
            "models.id": 1,
            "brands.name": "Honda",
            "models.name": "Honda",
            "action": "

"
        }, {
            "models.id": 1,
            "brands.name": "Honda",
            "models.name": "Honda",
            "action": "

"
        }]
    }

My data table initialization is like the following:

     $(document).ready(function() {
    
        var dataTableSettings = {};
    
        dataTableSettings.autoWidth = false;
        dataTableSettings.order = [
            [0, "desc"]
        ];
    
        dataTableSettings.aLengthMenu = [
            ["10", "20", "30", "-1"],
            ["10", "20", "30", "all"]
        ];
    
        dataTableSettings.dom = '<"pull-left"f> Br <"pull-right"l>tip';
        // dataTableSettings.dom='Blfrtip';
        dataTableSettings.buttons = [];
        // dataTableSettings.fixedColumns= true;
    
    
        dataTableSettings.processing = true;
        dataTableSettings.serverSide = true;
        dataTableSettings.paging = true;
        dataTableSettings.ajax = {};
    
    
    
        dataTableSettings.ajax.url = "http://localhost/cnp1352/admin/make-and-model";
        dataTableSettings.ajax.data = function(data) {
    
            $(".search-form input, .search-form  select ").each(function() {
                data[$(this).attr('name')] = $(this).val();
    
            });
        };
        dataTableSettings.columns = [{
            "data": "models.id"
        }, {
            "data": "brands.name"
        }, {
            "data": "models.name"
        }, {
            "data": "action"
        }];
        dataTableSettings.columnDefs = [
    
            {
                "targets": [3],
                "orderable": false,
            },
            {
                "visible": false,
                "targets": []
            },
    
            {
                "targets": [],
                "createdCell": function(td, cellData, rowData, row, col) {
                    $(td).addClass("img-custom-product");
                }
            }
    
    
        ];
    
    
    
    
        dataTableSettings.language = {
            paginate: {
                previous: "",
                next: ""
            },
            info: "Showing page _PAGE_ of _PAGES_"
        };
    
        dataTableSettings.drawCallback = function() {
            $(".dataTables_paginate > .pagination").addClass("pagination-rounded")
        };
    
        table = $('#empTable').DataTable(dataTableSettings);
        $('#empTable_filter input').addClass('form-control');
        $('#empTable_length select').addClass('form-control');
        var info = table.page.info();
    
    
     });

user_12567365 · Answer

DataTables uses JavaScript's dotted notation to drill down into nested JSON structures. And, as you have seen, this conflicts with JSON keys which themselves have dots in their names, such as "brands.name".

The solution is to place these names inside square brackets:

dataTableSettings.columns = [
  { "data": ["models.id"] }, 
  { "data": ["brands.name"] }, 
  { "data": ["models.name"] }, 
  { "data": "action" }
];

Now, Datatables will use JavaScript bracket notation, instead of dotted notation for these items.

See Property accessors for background.

Ajax DataTable not showing values for field names containing dots (.)

1 Answers