I have problem with dataTable using JSON Object, here is the Columns Definition:

$(document).ready(function() {
        $('#tb_kehadiran').DataTable({ 
            processing: true,
            serverSide: true,
            scrollX: true,
            order: [], //init datatable not ordering
            ajax: "<?php echo site_url('ajax-readabsen')?>",
            
            columns: [
                {data: 'no', orderable:false},
                {data: 'abs_hari'},  
                {data: 'abs_tgl'},
                {data: 'abs_datang', orderable:false},
                {data: 'abs_pulang', orderable:false},
                {data: 'abs_status'},
            ]
        });
    });

I want to combine two Object values in one row, I was try do like this:

{data: 'abs_hari'}   " "  {data: 'abs_tgl'},

But it doesn't work,

Can you help me to solve this?

Thanks for any ideas.

CodePudding user response：

You have a couple of options to do it.

1. ajax.dataSrc option:

Whit this option, you can manipulate the data you receive from ajax BEFORE they are used as source for your table. Then you return NEW data that will be the new source:

$(document).ready(function() {
    $('#tb_kehadiran').DataTable({ 
        processing: true,
        serverSide: true,
        scrollX: true,
        order: [], //init datatable not ordering
        ajax: {
            url: "<?php echo site_url('ajax-readabsen')?>",
            dataSrc: function(originalJson) {
                // run logic to manipulate your originalJson.
                // Combine, split, do whatever you want.
                // For example, create a new field 
                // combining the data of 'abs_hari' and 'abs_tgl'
                // and call it 'abs_my_new_data_hari_tgl'.

                return newJson; // <- this will be the new data source for your table
            },
        },
        columns: [
            {data: 'no', orderable:false},
            // {data: 'abs_hari'},  
            // {data: 'abs_tgl'}, 
            {data: 'abs_my_new_hari_tgl_data_src'},
            {data: 'abs_datang', orderable:false},
            {data: 'abs_pulang', orderable:false},
            {data: 'abs_status'},
        ]
    });
});

2. columns.render option:

Use a custom function to render data inside a specific column of your table:

$(document).ready(function() {
    $('#tb_kehadiran').DataTable({ 
        processing: true,
        serverSide: true,
        scrollX: true,
        order: [], //init datatable not ordering
        ajax: "<?php echo site_url('ajax-readabsen')?>",
        columns: [
            {data: 'no', orderable:false},
            // {data: 'abs_hari'},  
            // {data: 'abs_tgl'},
            {
                data: null, // can be null but also one of your data field i.e. 'abs_hari'
                render: myCustomRenderFunction
            },
            {data: 'abs_datang', orderable:false},
            {data: 'abs_pulang', orderable:false},
            {data: 'abs_status'},
        ]
    });
});

// define a render function
function myCustomRenderFunction(data, type, row, meta) {
    if(type === 'display') {
        return row['abs_hari']   " "   row['abs_tgl'] // this is used to display in the table
    } else { 
        return data; // original data of the cell from your source. this is used for functionalities other than display (like sorting, odering)
    }
}