Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

227
Views
Combine JSON value in one row table in dataTable

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.

over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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)
    }
}
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!