How to combine two columns to one?

loopers

Currently I set the columns with the data from the JSON using columns:

   // setting the columns from the html builder
   ->columns($this->getColumns())

   // setting the data
    protected function getColumns()
    {
        return [
            ['title' => 'Id', 'data' => 'id'],
            ['title' => 'Status', 'data' => 'status'],
            ['title' => 'Account Number', 'data' => 'account_number'],
            ['title' => 'Account Name', 'data' => 'account_name'],
        ];
    }

But I need to combine the account_number and account_name in a single column called Account Information. How should I do that? I got lost in the docs, I'm not sure if it's something to do via columnDefs, or editColumn or setting the row data somehow?

kthorngren

See if this example helps.

Kevin

colin

Also, this example, ignore the fact that it's Editor - the first name/last name field joining is the important bit,

Colin

loopers

@kthorngren, @colin, I'm a beginner with datatables, so I'd like to know if I understood correctly: a data table must have some sort of query which returns a JSON response. One of the properties of this JSON response is data which includes the columns from the db, numbered from 0 to the last columns.

so if my query is SELECT (col1, col2, col3, col4)..., and I want to combine col2 and col3, I can do:

        "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    return data + ", " +row[2]';
                },
                "targets": 1 // the place of col2
            },
            { "visible": false,  "targets": [ 2 ] } // hide col3 as we combine it with col2

But, how do I set the correct data? Because in the example it says data: 0, but in my case it should be data: 1? Do I just add it as a property in columnDefs?

        "columnDefs": [
            {
                "data": "column_name" // this? or row[1]?
                "render": function ( data, type, row ) {
                    return data + ", " +row[2]';
                },
                "targets": 1 // the place of col2
            },
            { "visible": false,  "targets": [ 2 ] } // hide col3 as we combine it with col2

colin

Can you post a snippet of the data you get back, please, that will help us tailor an example for you,

Colin

oxcore

@colin there is any way to join 2 buttons in 1 column?
Like Edit and Delete button in 1 column only.

kthorngren

Sure just use columns.defaultContent or columns.render to place as many buttons as you want in the column. Something like this example:
http://live.datatables.net/xijecupo/1/edit

Kevin

oxcore

Hi @kthorngren thanks for your quick reply.

Well I did

            {   
                data: null,
                defaultContent: '<input type="button" class="td.editor-edit" value="Edit"/><br><input type="button" class="td.editor-delete" value="Delete"/>',
                orderable: false    
            },

With

        // Editar Registo
        $('#autoleve_bugtracker').on('click', 'td.editor-edit', function (e) {
            e.preventDefault();

            editor.edit( $(this).closest('tr'), {
                title: 'Edit record',
                buttons: 'Atualizar'
            } );
        } );

        // Apagar Registo
        $('#autoleve_bugtracker').on('click', 'td.editor-delete', function (e) {
            e.preventDefault();

            editor.remove( $(this).closest('tr'), {
                title: 'Apagar Registo',
                message: 'Tem acerteza que quer apagar este registo?',
                buttons: 'Apagar'
            } );
        } );

but still doesn't work, ant tips?
Thanks in advance, and for the amazing tool!

kthorngren

but still doesn't work, ant tips?

In what way doesn't it work?

Looks like you are using the Editor. If so maybe this example will help.

Please provide a link to a test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

oxcore

Hi @kthorngren

the <a class="editor-create">+ Criar Novo registo</a> works in the php/html file
but when I use the same at .js
defaultContent: '<a class="editor-create" >Criar registo</a>',',
just dont open nothing.

I ll dig more about, maybe its some CSS trash code somewhere here

allan

I'm not sure if you are using it exactly as is there, but there is a syntax error:

defaultContent: '<a class="editor-create" >Criar registo</a>',',

should be:

defaultContent: '<a class="editor-create" >Criar registo</a>',

Failing that, as Kevin said, we'd need a test case.

Allan