DataTables: как установить классы в ячейки строки таблицы (но не в ячейки заголовка таблицы!)

17

У меня действительно красивый стиль для моих таблиц.

{извините ссылки больше не работают}

Мне пришлось добавить sClass, чтобы новые строки (добавленные fnAddData) получили нужные классы.

К сожалению, это разрушает мой макет, потому что эти классы также добавляются в мои ячейки заголовка таблицы.

{извините ссылки больше не работают}

Как настроить sClass для применения только к ячейкам TBODY?

Чтобы уточнить:

  var rolesTable = $('#roles').dataTable({
      "aoColumns": [
        { "mDataProp": "id", "sClass": "avo-lime-h avo-heading-white" },
        { "mDataProp": "name", "sClass": "avo-light" },
        { "mDataProp": "module", "sClass": "avo-light" },
        { "mDataProp": "description", "sClass": "avo-light" },
        { "mDataProp": null, "bSearchable": false, "bSortable": false, 
          "sDefaultContent": '<button type="button" name="add" class="btn"><i class="icon-plus icon-white"></i></button>' }, 
      ],
  }); // end od dataTable

Таким образом, когда я вызываю

rolesTable.fnAddData( { 
    "id": 10, 
    "name": "testname", 
    "module": "testmodule", 
    "description": "testdescription" 
} );

, то добавленная строка выглядит следующим образом:

<tr>
    <td class="avo-lime-h avo-heading-white">10</td>
    <td class="avo-light">testname</td>
    <td class="avo-light">testmodule</td>
    <td class="avo-light">testdescription</td>
    <td></td>
</tr>

И это отлично ОК

** проблема в том, что этот параметр также добавляет эти классы в:

<thead>
    <tr> (...) </tr>
</thead>

таблицы head cell ... которые я не хочу

    
задан loostro 11.06.2012 в 18:04
источник
  • Пожалуйста, разместите код, относящийся к вопросу. В идеале, помимо кода в самом теле вопроса, добавьте пример jsFiddle вашей проблемы. Это поможет нам помочь вам. –  Madara Uchiha♦ 11.06.2012 в 18:06
  • Я не знал, что могу отметить «принятый» без ответа на ответ ... и до недавнего времени мой счет был слишком низким, чтобы иметь возможность повышать –  loostro 11.06.2012 в 18:17

4 ответа

30

Решение моей проблемы: использование fnRowCallback вместо sClass для установки классов в новые строки.

  var rolesTable = $('#roles').dataTable({
      "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "name" },
        { "mDataProp": "module" },
        { "mDataProp": "description" },
        { "mDataProp": null, "bSearchable": false, "bSortable": false, 
          "sDefaultContent": '<button type="button" name="add" class="btn btn-round"><i class="icon-plus icon-white"></i></button>' }, 
      ],
      "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
          $('td:eq(0)', nRow).addClass( "avo-lime-h avo-heading-white" );
          $('td:eq(1),td:eq(2),td:eq(3)', nRow).addClass( "avo-light" );
        }
  }); // end od dataTable
    
ответ дан loostro 11.06.2012 в 23:14
источник
  • Проблема с этим кодом заключается в том, что вы пробуете addClass при каждом розыгрыше таблицы. Это может привести к проблемам с производительностью в некоторых сценариях. Лучшим решением было бы добавить класс после init таблицы и после динамического добавления данных. См. Тему здесь для обсуждения. –  gamliela 09.01.2014 в 11:03
6

Поскольку вы используете sClass для применения стиля к таблице, простым решением вашей проблемы является изменение самого CSS для применения только к элементам td.

Старый стиль CSS:

.avo-light {
    color: blue;
}

Новый стиль CSS:

td.avo-light {
    color: blue;
}

Таким образом, CSS будет влиять на ячейки, которые вам интересны при применении этого стиля, несмотря на то, что sClass применяется и к элементам.

Я понимаю, что этот вопрос немного стар, но я считаю его существенно более модульным, чем лучшее решение.

    
ответ дан nicmoon 02.08.2013 в 17:58
источник
2

Установите классы по умолчанию раньше.

$.fn.dataTableExt.oStdClasses.sStripeOdd = '';

$.fn.dataTableExt.oStdClasses.sStripeEven = '';

Дальнейшие ссылки см. здесь Ссылка

    
ответ дан user2310305 23.04.2013 в 09:55
источник
2
  let table = $("#myTable").dataTable();
  table.rows().every(function(rowIdx, tableLoop, rowLoop){
    $(this.node().cells[0]).addClass('red');
    $(this.node().cells[1]).addClass('blue');
  }

После того, как таблица будет отображаться, проведите по всем строкам с помощью селектора JavaScript каждой строки и внесите нужные изменения. Это касается проблем производительности, вызванных gamliela в ответ loostr. DataTables rows (). each () documentation

    
ответ дан cs01 26.09.2016 в 21:46
источник
  • Работал для меня. Я загружал данные через Ajax, поэтому пришлось обернуть это с помощью initComplete - datatables.net/reference/option/initComplete –  raison 08.10.2016 в 11:42