javascript - jQuery数据表columnDefs问题

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

documentation指出：


  字符串-类名将在列的TH上匹配


另外，如果我改为目标索引[0]，则会收到错误消息。另外，它会发射约22次。它不应该开火六次吗？每个索引为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/

最佳答案

没有columns.class属性，请改用columns.className。
更改为targets:[0]时会出现错误，因为您的columnDefs.render回调不返回任何数据，应该返回任何数据。除非需要通过设计使用类名进行引用，否则使用targets:0或targets:[0]是引用列的首选方法。
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进行演示。

优化代码

如果您不需要按类名引用列，则可以进一步优化代码。可以在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进行演示。

关于javascript - jQuery数据表columnDefs问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30717738/