DataTables display multiple rows as one / hyperlink

Question

enter image description here

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]
    }]
});

mainguy · Accepted Answer · 2014-04-30 09:36:52Z

2

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

edited Apr 30, 2014 at 9:36

answered Apr 28, 2014 at 13:18

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user3566608 Over a year ago

Thank you!!! I modified the code a bit and it's not working, could you take a look at it? I edited it in my question.

mainguy Over a year ago

Are you getting undefineds? The need to see some lines of your ajax data returned from the server. Else try to describe what exactly is not working.

user3566608 Over a year ago

ppaddict.com/serversideTests.php Those are over 5000 rows of data so I'm not sure if you want see them, your browser might crash. It What I get is this : ppaddict.com/tests.php

mainguy Over a year ago

Just as I thought, you are not returning key:value pairs from your ajax call. In this case you have to use numeric indices to address the data. See my updated answer. If you can do this, change your server sided code to return proper key:value pairs. Makes the whole stuff more readable.

user3566608 Over a year ago

I'm using the server-side example from DataTables, I don't really know how to add proper key:value pairs. It's still not working, sorry..

|

Collectives™ on Stack Overflow

DataTables display multiple rows as one / hyperlink

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related