jQuery 数据表 columnDefs 问题

Question

为什么 jQuery 数据表 columnDefs 不能使用 class 名称？ render 回调永远不会触发。

A string - class name will be matched on the TH for the column

此外，如果我改用目标索引 [0]，我会收到错误消息。此外，它会发射约 22 次。它不应该开火6次吗？索引为 0 的每个单元格 1 个？

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( {

    columnDefs: [
        {
            render: function ( data, type, row ) {
                console.log(row);            
            },
            targets: 'foo'
        }
    ],

    columns: [
        { "title": "Engine", class: 'foo' },
        { "title": "Browser" },
        { "title": "Platform" },
        { "title": "Version", "class": "center" },
        { "title": "Grade", "class": "center" }
    ],

    data: dataSet
});

http://jsfiddle.net/y3fnvzad/1/

Answer 1

没有columns.class属性，用columns.className代替
您在更改为 targets:[0] 时遇到错误，因为您的 columnDefs.render 回调没有 return 任何数据，而它应该如此。使用 targets:0 或 targets:[0] 是引用列的首选方式，除非您需要在设计时使用 class 名称进行引用。
columnDefs.render 触发的次数多于单元格的数量，因为此回调函数不仅被调用用于显示事件，而且被许多其他事件（过滤、排序等）调用。

您更正后的代码是：

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( {

    columnDefs: [
        {
            render: function ( data, type, row, meta ) {
                console.log(type, data, row); 
                return data;
            },
            targets: 0
        }
    ],

    columns: [
        { "title": "Engine", "className": "foo" },
        { "title": "Browser" },
        { "title": "Platform" },
        { "title": "Version", "className": "center" },
        { "title": "Grade", "className": "center" }
    ],

    data: dataSet
});

请参阅 this JSFiddle 进行演示。

优化代码

如果您不需要通过 class 名称引用列，您的代码可以进一步优化。 columnDefs.render 回调可以在 columns 属性中定义。我还在 render 回调中添加了类型检测，以演示如何使用它。

查看下面的代码。

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 ) {
               // If data is being displayed
               if(type === "display"){
                  return "<b>" + data + "</b>";
               // Otherwise, if data is not being displayed
               } else { 
                  return data;        
               }
          },
        },
        { "title": "Browser" },
        { "title": "Platform" },
        { "title": "Version", "className": "center" },
        { "title": "Grade", "className": "center" }
    ],

    data: dataSet
});

请参阅 this JSFiddle 进行演示。

jQuery 数据表 columnDefs 问题

jQuery datatables columnDefs issues

javascript

jquery

datatables