Use two columns in one (Concat)

4usolution · September 2016

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 · September 2016

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

Allan

4usolution · September 2016

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 · September 2016

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 · September 2016

Yes that was the bug.

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

will work fine - thanks.

4usolution · September 2016

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 · September 2016

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 · September 2016

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"]]}

Use two columns in one (Concat)

Use two columns in one (Concat)

Answers

Howdy, Stranger!

Categories

DataTables

Use two columns in one (Concat)

Use two columns in one (Concat)

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables