2010-07-09 3 views
10

Как добавить класс в строку, которую я добавляю в datatable?Как добавить класс в новую строку в jQuery datatables?

Если это невозможно, как я могу использовать fnRowCallback или fnDrawCallback, чтобы изменить класс?

oTable = $('#example').dataTable({ 
    "bJQueryUI": true, 
    "bSortClasses": false, 
    "sDom":'T<"clear">', 
    "sPaginationType": "full_numbers", 
    "sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>', 
    "fnRowCallback": function(nRow, aData, iDisplayIndex) { 

    var oSettings = oTable.fnSettings(); 
    oSettings.aoData[iDisplayIndex].nTr.className = "gradeX odd"; 
    } 
}); 

Приведенный выше код дает мне ошибку.

это, как я добавить строку:

oTable.fnAddData(arr); 
+0

сомневается, что это будет действительно помочь, но сделал. Я пробовал много других вещей, но без результатов. – Pierluc

+0

или есть способ, которым я могу просто добавить строку html, в datatable через функции datatables – Pierluc

ответ

-4

Хорошо, возможно, я не понимая, что именно ваш вопрос, но если вы просто добавить строку, то почему бы не установить класс перед вами добавить его? Подобно этому, несколько коряво, например:

jQuery("<tr />") 
    .html(your_var_containing_the_interior_dom) 
    .addClass("yourClass") 
    .appendTo(jQuery("#yourTable")) 
19

Попробуйте изменить fnRowCallback к следующему:

"fnRowCallback": function(nRow, aData, iDisplayIndex) { 
    nRow.className = "gradeX odd"; 
    return nRow; 
} 

Вы можете обратиться к offical documentation для дальнейшего понимания этой функции обратного вызова.

+1

Лучшее решение, которое я нашел. Я хотел добавить класс к определенному столбцу вместо строки. $ ($ (nRow) .children() [1]). Attr ('class', 'status-indicator'); – rhigdon

4

Попробуйте это:

"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
      var id = aData[0]; 
      $(nRow).attr("id",id); 
      if (jQuery.inArray(aData[0], gaiSelected) != -1) 
      { 
       $(nRow).addClass('row_selected'); 
      } 
      return nRow; 
} 

Для добавления строки в DataTable попробовать этот код из:

http://datatables.net/examples/api/add_row.html

/* Global var for counter */ 
var giCount = 1; 

$(document).ready(function() { 
    $('#example').dataTable(); 
}); 

function fnClickAddRow() { 
    $('#example').dataTable().fnAddData([ 
     giCount+".1", 
     giCount+".2", 
     giCount+".3", 
     giCount+".4" ]); 

    giCount++; 
} 
2
$(document).ready(function() { 
    oTable = $('#table_id').dataTable({"fnInitComplete": after_init}); 
}); 
function after_init(){ 
    $("#table_id tbody tr").addClass("gradeA"); 
} 
9

Вы можете добавить имя класса в ваших данных о себе как описано в документации.

http://www.datatables.net/examples/server_side/ids.html

использование DT_RowId для добавления идентификатора для любой строки
использования DT_RowClass для добавления класса для любой строки
использования DT_RowData для добавления объекта html5 данных в любой строке

например, :

"data": [ {
"DT_RowId": "row_5",
"first_name": "Айри",
"last_name": "Сато",
"позицию": "Бухгалтер",
"офис": «Токио »
"start_date": "28 ноября 08",
"зарплата": "$ 162700"
}]

1

Это должно сделать трюк:

var r = t.row.add([ 
    .... 
]).node(); 
$(r).css({"color":"red"}); 
+0

Я не знаю, почему это отклонено, это решает проблему (кроме добавления встроенного CSS) Чтобы добавить класс, используя эту технику, просто измените $ (r) .css на $ (r) .addClass ('class «); –

1

Официальная документация говорит:

var table = $('#example').DataTable(); 

table 
    .rows.add([ 
     new Pupil(43), 
     new Pupil(67), 
     new Pupil(102) 
    ]) 
    .draw() 
    .nodes() 
    .to$() 
    .addClass('new'); 

Пожалуйста, прочитайте: rows.add()

+0

Этот код предназначен для нескольких строк, которые смотрят на шахту для одной строки. –

0

После прочтения документации этой работы для меня:

var my_dataTable = $('#my-table').DataTable(); 
my_dataTable.row.add([ 
       'Hello', 
       'Hello2', 
       'Hello3', 
       'Hello4' 
      ]).draw().nodes().to$().addClass("my_class"); 
Смежные вопросы