DataTables display multiple rows as one / hyperlink

Question

I am using exactly this example : http://datatables.net/release-datatables/examples/server_side/server_side.html

Now I don't want to have 3 columns "Artits, Title, Version" instead I want to have one column "Name" where the 3 are shown together.

I have no idea how to do this...

Also I wanted to add a hyperlink to the "Name" that contains the "setid" but this code is not so easy to understand for me.

This here is not working :

var oTable = $('#example').dataTable({
    "bServerSide": true,
    "sAjaxSource": "serversideTests.php",
    "sAjaxDataProp": "aaData",
    "bProcessing": true,
    "aoColumns": [{
      "mData": "setid"
    }, {
      "mData": "beatmapid",
      "sClass": "hidden"
    }, {
      "mData": "expectedPP"
    }, {
      "mData": "perfectPP"
    }, {
      "mData": "Artist",
      "sClass": "hidden"
    }, {
      "mData": "Title",
      "sClass": "hidden"
    }, {
      "mData": "Version",
      "sClass": "hidden"
    }, {
      "mData": null,
      "mRender": function(data, type, full) {
        return full['Artist'] + '-' +
            full['Title'] + '[' + full['Version'] + ']' +
          '<br><a href=/' + 'osu.ppy.sh/d/' + full['setid'] + '>' + 'Download' + '</a>';
      }
    }, {
      "mData": "StarDifficulty"
    }, {
      "mData": "ApproachRate"
    }, {
      "mData": "BPM"
    }, {
      "mData": "length"
    }]
});

With indexes

 var oTable = $('#example').dataTable({
    "bServerSide": true,
    "sAjaxSource": "serversideTests.php",
    "sAjaxDataProp": "aaData",
    "bProcessing": true,
    "aoColumns": [{
      "mData": [0],
      "sClass" : "hidden"
    }, {
      "mData": [1]
    }, {
      "mData": [2]
    }, {
      "mData": [3]
    }, {
      "mData": [4],
      "sClass": "hidden"
    }, {
      "mData": [5],
      "sClass": "hidden"
    }, {
      "mData": [6],
      "sClass": "hidden"
    }, {
      "mData": null,
      "mRender": function(data, type, full) {
        return full[4] + '-' +
            full[5] + '[' + full[6] + ']' +
          '<br><a href=/' + 'osu.ppy.sh/d/' + full[1] + '>' + 'Download' + '</a>';
      }
    }, {
      "mData": [7]
    }, {
      "mData": [8]
    }, {
      "mData": [9]
    }, {
      "mData": [10]
    }, {
      "mData": [11]
    }]
});

Answer 1

Try it with this code:

    var oTable = $('#myDataTable').dataTable({
    "bServerSide": true,
    "sAjaxSource": "records.json",
    "sAjaxDataProp": "aaData",
    "bProcessing": true,
    "aoColumns": [{
      "mData": "id",
      "sWidth": "5%"
    }, {
      "mData": "title",
      "sClass": "hidden"
    }, {
      "mData": "link",
      "sClass": "hidden"
    }, {
      "mData": "artist",
      "sClass": "hidden"
    }, {
      "mData": "image",
      "sWidth": "10%",
      "mRender": function(data, type, full) {
        return '<img src="' + data + '"></img>';
      }
    }, {
      "mData": null,
      "mRender": function(data, type, full) {
        return '<b>' + full['title'] + '</b><br>' +
          '<i>' + full['artist'] + '</i><br>' +
          '<a class="btn btn-info btn-sm" href=#/' + full['link'] + '>' + 'Download' + '</a>';
      }
    }, {
      "mData": "status",
      "sWidth": "2%"
    }]
    })

Note that several rows have a sClass hidden which hides the row from display but keeps the data intact.

The actual Name column has null data but a rendering function that collects the entries from the hidden rows and renders a html snippet.

Have a look at this Plunker to see it working.

UPDATE 2:

If you are not returning key:value pairs from your json call, you have to use indexes (starting at 0):

    "aoColumns": [{
      "mData": [0],
      "sClass": "hidden"
    }, {
      "mData": [1]
    }, {
      "mData": [2]
    }, {
      "mData": [3]
    }, {
      "mData": [4],
      "sClass": "hidden"
    }, {
      "mData": [5],
      "sClass": "hidden"
    }, {
      "mData": [6],
      "sClass": "hidden"
    }, {
      "mData": null,
      "mRender": function(data, type, full) {
        return full[4] + '-' +
          full[5] + '[' + full[6] + ']' +
          '<br><a href=/' + 'osu.ppy.sh/d/' + full[0] + '>' + 'Download' + '</a>';
      }
    }, {
      "mData": [7]
    }, {
      "mData": [8]
    }, {
      "mData": [9]
    }, {
      "mData": [10]
    }]

Look at the (once again) updated Plunker