Question

我认为这是一件简单的事，但是！

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

使用“User_ID”，http://somepage.php?UID=data0

的HTML链接

我看过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>'
                 },

Answer 1

您可以仔细查看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;
      }
    } ]
  } );
} );

Answer 2

我总是帮助自己解决这个问题：

不要将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来理解这个黑客背后的概念。

获取要在html链接中使用的DataTables单元格值

2 个答案: