CODEWITHSUNDEEP
jquerydatatables
Tristan Hulbert
Tristan Hulbert

Reputation: 11

Data Tables - Cell manipulation

I'm attempting to use jQuery DataTables to show rows of tickets with each row being a new ticket and each ticket having various cells being:

Rows in the table obviously look as follows by default

Client      Status      Priority     Subject     Date

However, the eventual layout of a row would be:

Client                      Status      Priority

Subject                                     Date

I have combined each cell into the same (first) cell using the code below with the intention of then achieving the desired layout. However it doesn't appear to be the right solution.

    "columnDefs": [
    {

        "render": function ( data, type, row ) {
            return data +' '+ row[1]+' '+ row[2]+' '+ row[3]+' '+ row[4]+' '+ row[5];

        },
        "targets": 0
    },

    { "visible": false, "targets": [ 1,2,3,4,5 ]}

    ],

Is this type of manipulation possible with jQuery DataTables?

Upvotes: 1

Views: 233

Answers (1)

annoyingmouse
annoyingmouse

Reputation: 5699

This should work:

var table = $('#example').DataTable({
    columns: [
        {
            "render": function(data, type, row){
                return row[0] + "<br/>" + row[3];
            }
        },
        null,
        {
            "render": function(data, type, row){
                return row[2] + "<br/>" + row[4];
            }
        },
        {
            "visible": false
        },
        {
            "visible": false
        }
    ]
});

Remember to alter your thead though:

<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Position</th>
    </tr>
        <th>Office</th>
        <th colspan="2">Salary</th>
    </tr>
</thead>

Working example on JSFiddle. You'll need to style things as well I guess and perhaps think about the ordering, if you enable it. Column names don't match with your but the structure is the same. Hope that helps.

Upvotes: 1

Related Questions