DataTables将多行显示为一个/超链接

Question

我正在使用这个例子：http://datatables.net/release-datatables/examples/server_side/server_side.html

现在我不想要3列“Artits，Title，Version”，而是希望有一列“Name”，其中3个一起显示。

我不知道该怎么做......

此外，我想添加一个包含“setid”的“名称”的超链接，但这段代码对我来说并不那么容易理解。

这不起作用：

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

使用索引

 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

尝试使用此代码：

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

请注意，有几行有 sClass hidden，它会隐藏显示的行，但会保持数据的完整。

实际的Name列有null data但是一个渲染函数，它从隐藏的行中收集条目并呈现一个html片段。

看看这个Plunker，看它是否有效。

更新2：

如果你没有从你的json调用中返回key：value对，你必须使用索引（从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]
    }]

再看（再次）更新Plunker