获取要在html链接中使用的DataTables单元格值 - Get DataTables cell value to use in html link

Get DataTables cell value to use in html link

我本以为这是一件简单的事情，但是！

使用DataTables，我希望隐藏表的第一列，并在下一列单元格的HTML图像链接中使用该单元格数据。

html链接使用"User_ID"，http://somepage.php?UID=data0

我看了fnGetData（）和mRender，现在我很困惑。

我的代码：

"aoColumns": [
                { "mData": "User_ID",
                  "bVisible": false, "bSearchable": false, "bSortable": false
                },
                { "mData": null,
                  "bSearchable": false, "bSortable": false,
                  "sClass": "center",
                  "sDefaultContent": '<a href="somepage.php?UID=' + "data from cell 0" + '"><img src="images/look.png" width="16"></a>'
                 },

我总是用这个技巧来帮助自己：

不要将bVisible设置为false，因为行中没有数据。它根本没有被渲染。使用sClass并设置display:none。这样，列对用户来说是不可见的，但它仍然存在。

然后您可以使用mRender来显示自定义单元格模板：

    "aoColumnDefs": [{
      "aTargets": [0],
      "sClass": "hiddenID"
    }, {
      "aTargets": [1],
      "bSearchable": false,
      "bSortable": false,
      "sClass": "center",
      "mRender": function(data, type, full) {
        return '<a href=" http://somepage.php?UID=' + full[0] + '">Click me</a>';
      }
    }, {
      "aTargets": [2],
    }, ]

现在数据就在那里，可以排序和过滤。

看看这个Plunker和style.css，了解这个黑客背后的概念。

您可以仔细查看mData，这样您就可以执行回调函数，而不必使用隐藏列：

// Using mData as a function to provide different information for
// sorting, filtering and display.
$(document).ready( function() {
  var oTable = $('#example').dataTable( {
    "aoColumns": [
        { "mData": "User_ID",
          "bVisible": true, "bSearchable": false, "bSortable": false
        }
    ],
    "aoColumnDefs": [ {
      "aTargets": [ 0 ],
      "mData": function ( source, type, val ) {
        if (type === 'set') {
          source.id = val;
          // Store the computed dislay and filter values for efficiency
          source.id_display = val=="" ? "" : '<a href="somepage.php?UID=' + val + '"><img src="images/look.png" width="16"></a>';
          source.id_filter  = val=="" ? "" : val;
          return;
        }
        else if (type === 'display') {
          return source.id_display;
        }
        else if (type === 'filter') {
          return source.id_filter;
        }
        // 'sort', 'type' and undefined all just use the integer
        return source.id;
      }
    } ]
  } );
} );