AJAX - Columns, DefaultContent, ColumnDefs

riwos

I have a issue with loading and rendering data via AJAX for custom columns.. Can anyone explain me why DataTable works only in one specific case but in others not..

HTML (table):

<table class="table table-striped table-bordered dataTable no-footer" cellspacing="0" id="e244dc00-2ff9-450d-9d17-a15c13b550d4" data-ajax="http://localhost:64395/Scripts/test.txt">
    <thead>
        <tr role="row">
            <th class="testselectrow">Select</th>
            <th>Sample Column</th>
            <th>Sample Column 1</th>
            <th>Sample Column 2</th>
            <th  class="testaction" >Action</th>
        </tr>
    </thead>
</table>

AJAX - Data

{
  "data": 
  [
        
    [
            "5b44174b-fbbc-439d-9fb9-4482fe3de853",
            "www",
            "%$&%^&^*"
        ], 
        [
            "44afee8d-2324-4e12-a442-7c6731bbc54a",
            "zxc",
             "jklkjljk"
        ], 
        [
            "13905244-26b7-4f39-9369-9794d2fc95a1",
            "gfhgf",
            "4456"
        ], 
        [
            "2e3646da-9e7f-49e6-9b53-a6007cd91ca1",
            "vxcvxc",
            "nb,mn.lkl.lo"
        ]
    
    ]
}

DataTable JavaScript

First case (not loaded data but rendered column one and five)

$('#e244dc00-2ff9-450d-9d17-a15c13b550d4').DataTable({
    "columns" : [{
            "data" : null,
            "defaultContent" : '<div style="text-align:center"><input id="929b005c-012e-463d-b236-2ac3f94f4501" type="checkbox"  style="border-radius: 4px;width: 30px;height: 30px;font-size: 22px;"></div>'
        }, {
            "data" : "Sample Column"
        }, {
            "data" : "Sample Column 1"
        }, {
            "data" : "Sample Column 2"
        }, {
            "data" : null,
            "defaultContent" : '<div style="text-align:center"><button style="width:100%; margin-top: 5px;"  class="btn btn-danger"> delete </button></div>'
        }
    ]
});

Second case(loaded data but rendered column one. In column "Sample Column" has put data from column "Sample Column 1". Last colum has been rendered)

Example:

"Select": INPUT "Sample Column" : www "Sample Column 2":   %$&%^&^* "Sample Column 3":     "Action": INPUT
"Select": INPUT "Sample Column" : zxc   "Sample Column 2":   jklkjljk           "Sample Column 3":     "Action": INPUT

$('#e244dc00-2ff9-450d-9d17-a15c13b550d4').DataTable({
    "columns" : [{
            "data" : null,
            "defaultContent" : '<div style="text-align:center"><input id="929b005c-012e-463d-b236-2ac3f94f4501" type="checkbox"  style="border-radius: 4px;width: 30px;height: 30px;font-size: 22px;"></div>'
        }, 
            null
        , 
            null
        ,
            null
        , {
            "data" : null,
            "defaultContent" : '<div style="text-align:center"><button style="width:100%; margin-top: 5px;"  class="btn btn-danger"> delete </button></div>'
        }
    ]
});

Third case

Example:

"Select": 5b44174b-fbbc-439d-9fb9-4482fe3de853 "Sample Column" : www "Sample Column 2":   %$&%^&^* "Sample Column 3":     "Action": INPUT
"Select": 44afee8d-2324-4e12-a442-7c6731bbc54a "Sample Column" : zxc   "Sample Column 2":   jklkjljk           "Sample Column 3":     "Action": INPUT

$('#e244dc00-2ff9-450d-9d17-a15c13b550d4').DataTable({
    "columnDefs" : [{
            "targets" : "testselectrow",
            "defaultContent" : '<div style="text-align:center"><input id="929b005c-012e-463d-b236-2ac3f94f4501" type="checkbox"  style="border-radius: 4px;width: 30px;height: 30px;font-size: 22px;"></div>'
        }, {
            "targets" : "testaction",
            "defaultContent" : '<div style="text-align:center"><button style="width:100%; margin-top: 5px;"  class="btn btn-danger"> delete </button></div>'
        }
    ]
});

VERSION which WORKS !! (but why above cases NOT....)

DATA AJAX

{
  "data": 
  [
        
    {
            "Sample Column": "5b44174b-fbbc-439d-9fb9-4482fe3de853",
             "Sample Column 1": "www",
             "Sample Column 2": "%$&%^&^*"
        }, 
        {
             "Sample Column": "44afee8d-2324-4e12-a442-7c6731bbc54a",
            "Sample Column 1": "zxc",
             "Sample Column 2": "jklkjljk"
        }, 
        {
            "Sample Column": "13905244-26b7-4f39-9369-9794d2fc95a1",
             "Sample Column 1": "gfhgf",
             "Sample Column 2": "4456"
        }, 
        {
            "Sample Column": "2e3646da-9e7f-49e6-9b53-a6007cd91ca1",
            "Sample Column 1": "vxcvxc",
            "Sample Column 2": "nb,mn.lkl.lo"
        }
    
    ]
}

DATATABLE JS

$('#e244dc00-2ff9-450d-9d17-a15c13b550d4').DataTable({
    "columns" : [{
            "data" : null,
            "defaultContent" : '<div style="text-align:center"><input id="929b005c-012e-463d-b236-2ac3f94f4501" type="checkbox"  style="border-radius: 4px;width: 30px;height: 30px;font-size: 22px;"></div>'
        }, {
            "data" : "Sample Column"
        }, {
            "data" : "Sample Column 1"
        }, {
            "data" : "Sample Column 2"
        }, {
            "data" : null,
            "defaultContent" : '<div style="text-align:center"><button style="width:100%; margin-top: 5px;"  class="btn btn-danger"> delete </button></div>'
        }
    ]
});

allan

The last one works because you are using columns.data to tell DataTables where to get the data for each column.

The first doesn't work, because it is an array of data, but you are using columns.data to read from an object. The second doesn't work because it is an object, but you aren't telling it where to get the data.

This is covered in the manual.

Allan