Use two columns in one (Concat)

4usolution

Hi,

i have two columns in my mysql-table. Now i want to put 2 columns from database into one column (filed) of my datatables.

I try a kind of that - but it dosnt work :-)

`$columns = array(

array( 'db' => 'STRASSE'.'PLZ'.'ORT', 'dt' => 8 )

);`

allan

You can use a renderer to do that. See this example which uses that technique.

Allan

4usolution

after change and add this "columnDefs": [ { "targets": 2, "data": 'creator', "render": function ( data, type, row ) { return data.Vorname +' '+ data.Nachname; } },

i have a error in my code

"TypeError: data is undefined"

...is there no other way (easier) to combine two fields into one?

allan

Without a test case (per the forum rules) it is impossible to say for sure, but my guess is that you should use row.Vorname rather than data.*.

Beyond that, I'd need a link to the page to be able to provide any help, or at the very least the JSON returned from the server.

Allan

4usolution

Yes that was the bug.

"render": function ( data, type, row ) { return row[0] +' '+ row[1]; }

will work fine - thanks.

4usolution

Ok, i trie this code (notice that the javacode will be generated by a php file for supporting some php variables example) ...

`var TableDatatablesResponsive = function () {

var initTable1 = function () {
    var table = $('#ajax_table1');

    var oTable = table.dataTable({

        "processing": true,
        "serverSide": true,
        "ajax": 'data.php',

        "columnDefs": [
        {
            "targets": 2,
            "data": 'creator',
            "render": function ( data, type, row ) {
            return data.Vorname +' '+ data.Nachname;
          }
        },
        //{
        //  "targets": 0,
        //  "data": null,
       //   "orderable": false
       // },
        {
        "targets": -1,
        "data": null,
        "defaultContent": "<div class=\"btn-group pull-right\"><button class=\"btn green btn-xs btn-outline dropdown-toggle\" data-toggle=\"dropdown\">Tools<i class=\"fa fa-angle-down\"></i></button><ul class=\"dropdown-menu pull-right\"><li><a href=\"javascript:;\"><i class=\"fa fa-print\"></i> Print </a></li><li><a href=\"javascript:;\"><i class=\"fa fa-file-pdf-o\"></i> Save as PDF </a></li><li><a href=\"javascript:;\"><i class=\"fa fa-file-excel-o\"></i> Export to Excel </a></li></ul></div>"
        }],

        // Or you can use remote translation file
        "language": {
           url: '../lang/<?php echo $_GET['lang'].'/'.$_GET['lang']; ?>.json'
        },

        // setup buttons extentension: http://datatables.net/extensions/buttons/
        buttons: [
            { extend: 'print', className: 'btn dark btn-outline' },
            { extend: 'pdf', className: 'btn green btn-outline' },
            { extend: 'csv', className: 'btn purple btn-outline' }
        ],

        // setup responsive extension: http://datatables.net/extensions/responsive/
        responsive: {
            details: {

            }
        },

        "order": [
            [0, 'asc']
        ],

        "lengthMenu": [
            [5, 10, 15, 20, -1],
            [5, 10, 15, 20, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 10,

        //Layout
        "dom": "<'row' <'col-md-12'>><'row'<'col-md-6 col-sm-12'f><'col-md-6 col-sm-12'B>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>><'row'<'col-md-5 col-sm-12'l><'col-md-7 col-sm-12'>>", // horizobtal scrollable datatable


    });
}



return {

    //main function to initiate the module
    init: function () {

        if (!jQuery().dataTable) {
            return;
        }

        initTable1();
    }

};

}();

jQuery(document).ready(function() {
TableDatatablesResponsive.init();

});`

Since i add the new part

{ "targets": 2, "data": 'creator', "render": function ( data, type, row ) { return data.Vorname +' '+ data.Nachname; } },

i get no showing datas in my datatable. The "loading message" wont hide and no results will displayed.

The answear of the ajax call is
{"draw":1,"recordsTotal":2,"recordsFiltered":2,"data":[["1","Muster GmbH","","","","","","","12345","Musterstadt" ],["2","","Max","Mustermann","02271","0151","mail@max.de","Seine Strasse","12345","Maxstadt"]]}

What i'm doing wrong?

4usolution

Ok, if i change the code to this

"columnDefs": [ { "targets": 2, "data": 'creator', "render": function ( data, type, row ) { return data.Vorname +' '+ data.Nachname; } }, { "targets": -1, "data": null, "defaultContent": "<div class=\"btn-group pull-right\"><button class=\"btn green btn-xs btn-outline dropdown-toggle\" data-toggle=\"dropdown\">Tools<i class=\"fa fa-angle-down\"></i></button><ul class=\"dropdown-menu pull-right\"><li><a href=\"javascript:;\"><i class=\"fa fa-print\"></i> Print </a></li><li><a href=\"javascript:;\"><i class=\"fa fa-file-pdf-o\"></i> Save as PDF </a></li><li><a href=\"javascript:;\"><i class=\"fa fa-file-excel-o\"></i> Export to Excel </a></li></ul></div>" }],

No response will be display in my datatable, the "loading message" wont hide and no results will shown.

The callback of ajaxfile is

{"draw":1,"recordsTotal":2,"recordsFiltered":2,"data":[["1","Muster GmbH","","","","","","","12345","Musterstadt" ],["2","","Max","Mustermann","02271","0151","mail@max.de","Seine Strasse","12345","Maxstadt"]]}

4usolution

Ok, if i change the code to this

"columnDefs": [ { "targets": 2, "data": 'creator', "render": function ( data, type, row ) { return data.Vorname +' '+ data.Nachname; } }, { "targets": -1, "data": null, "defaultContent": "<div class=\"btn-group pull-right\"><button class=\"btn green btn-xs btn-outline dropdown-toggle\" data-toggle=\"dropdown\">Tools<i class=\"fa fa-angle-down\"></i></button><ul class=\"dropdown-menu pull-right\"><li><a href=\"javascript:;\"><i class=\"fa fa-print\"></i> Print </a></li><li><a href=\"javascript:;\"><i class=\"fa fa-file-pdf-o\"></i> Save as PDF </a></li><li><a href=\"javascript:;\"><i class=\"fa fa-file-excel-o\"></i> Export to Excel </a></li></ul></div>" }],

No response will be display in my datatable, the "loading message" wont hide and no results will shown.

The callback of ajaxfile is

{"draw":1,"recordsTotal":2,"recordsFiltered":2,"data":[["1","Muster GmbH","","","","","","","12345","Musterstadt" ],["2","","Max","Mustermann","02271","0151","mail@max.de","Seine Strasse","12345","Maxstadt"]]}