jQuery datatables columnDefs issues

Question

Почему нет данных jQuery datatables columnDefs, работающих с именами классов? Обратный вызов render никогда не запускается.

В documentation состоянии:

Строка - имя класса будет соответствовать на TH для колонки

Кроме того, если я изменю целевой индекс [0] вместо этого, я получаю сообщение об ошибке. Кроме того, он стреляет около 22 раз. Разве это не огонь 6 раз? 1 для каждой ячейки с индексом 0?

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 не возвращает никаких данных, которые он должен. Использование 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 для демонстрации.