Return jQuery 来自 DataTables 呈现函数的对象

Return jQuery object from DataTables render function

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

这是可以接受的解决方案吗?什么时候调用 type 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/

当为 render option, DataTables will call render 指定函数时,函数多次针对它需要的不同数据类型 - 排序、过滤和显示。

此外,根据文档:

The return value from the function is what will be used for the data requested.

所以您需要 return 一个字符串(不是 jQuery 对象),它将包含请求的操作类型的数据。

如果你想用jQuery构造一个link,当type等于[=13=时,你需要returnHTML字符串],请参阅下面的代码摘录:

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

更新:

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

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

请参阅 this JSFiddle 进行演示。