从 DataTables 渲染函数返回 jQuery 对象

Question

我想在render函数中返回一个 jQuery 对象。 由于这似乎不可能，下面的代码和我得到的一样接近。

这是一个可以接受的解决方案吗？ 什么时候调用类型type ？ 我似乎无法在文档中找到有关它的任何信息。

var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A']
];

$('#example').dataTable( {
    columns: [
        { 
            "title": "Engine", 
            "className": "foo", 
            "render": function ( data, type, row, meta ) {

                var $td = $('#example').DataTable().cell(meta.row, meta.col).nodes().to$();

                if(type === 'type'){
                    var $a = $('<a href="#"/>').data({ data: row }).text('foo');
                    $td.html($a);
                }


                return data;
          },
        },
        { "title": "Browser" },
        { "title": "Platform" },
        { "title": "Version", "className": "center" },
        { "title": "Grade", "className": "center" }
    ],

    data: dataSet
});

http://jsfiddle.net/y3fnvzad/7/

Answer 1

当为渲染选项指定函数时，DataTables 将针对它需要的不同数据类型多次调用渲染函数 - 排序、过滤和显示。

此外，根据文档：

函数的返回值将用于请求的数据。

因此，您需要返回一个字符串（不是 jQuery 对象），该字符串将包含所请求操作类型的数据。

如果你想使用 jQuery 构建一个链接，你需要在type等于display时返回 HTML 字符串，请参阅下面的代码摘录：

        "render": function ( data, type, row, meta ) {
            if(type === 'display'){
                return $('<a href="#"/>')
                   .text('foo')
                   .wrap('<div></div>')
                   .parent()
                   .html();
            } else {
                return data;
            }
      },

更新：

使用 jQuery data()将数据分配给元素是没有意义的，因为我们返回的是 HTML 字符串而不是 jQuery 对象。 在下面的示例中，我演示了如何在单击链接时访问行数据。

$('#example tbody').on('click', 'a', function(){
    // Get row data 
    console.log($('#example').DataTable().row($(this).closest('tr')).data());
});

请参阅此 JSFiddle进行演示。