在 dataTable 的一行 table 中合并 JSON 个值

Question

我对使用 JSON 对象的数据表有疑问， 这是列定义：

$(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'},
            ]
        });
    });

我想在一行中合并两个对象值，我尝试这样做：

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

但是不行，

你能帮我解决这个问题吗？

感谢任何想法。

Answer 1

你有几个选择。

1。 ajax.dataSrc 选项：

使用此选项，您可以在 ajax 将它们用作 table 的来源之前处理从 ajax 收到的数据。然后你 return NEW 将成为新来源的数据：

$(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 选项：

使用自定义函数在 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)
    }
}