2013-05-03 43 views
19

我使用jQuery datatables.I有數據等作爲COLUMN1如下如何設置基於jQuery的數據表中的列值錶行

Column1 Column2 Column3 
----------------------- 
AAA BBB  CCC 
AAA GGG  YYY 
BBB ooo  LLL 

現在對於第2行,我有相同的值AAA顏色。我想一些顏色適用於那些 rows.And然後另一種顏色第三row.Like這個我30個records.Is有可能做this.If可能我怎麼能幹這事使用jQuery數據tables.Thanks我提前...

回答

46

使用fnRowCallback(或更新的rowCallback)來實現這個

$('#example').dataTable({ 
    "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     switch(aData[0]){ 
      case 'AAAA': 
       $(nRow).css('color', 'red') 
       break; 
      case 'BBBB': 
       $(nRow).css('color', 'green') 
       break; 
      case 'CCCC': 
       $(nRow).css('color', 'blue') 
       break; 
     } 
    } 
}); 

演示:Fiddle

+0

但在這裏我不知道有多少cases.it會動態 – PSR 2013-05-03 07:54:21

+0

@PSR任何方式應該有一定的經營業務邏輯它說要應用什麼顏色對於一個值 – 2013-05-03 08:38:19

+1

謝謝@ArunPJohny,但我認爲在這個回調函數中需要返回nRow''',否則,datatable會引發異常,例如「一個節點沒有被fnRowCallBack返回」 – simomo 2014-05-20 07:20:42

7

API最近發生了變化,你現在應該使用威剛[ '列1'],而不是ADATA [0]

2

createdRow功能是爲V加到1.10

創建TR元件時執行

此回調(和所有TD子元素已被插入),或者如果使用DOM源,允許TR元件的操縱註冊。

使用延遲渲染(deferRender)或服務器端處理(服務器端)時,這樣你就可以添加事件,類名的信息或以其他方式在創建時格式化列。這是非常有用的。

https://datatables.net/reference/option/createdRow

例子:

$('#example').dataTable({ 
     // ... 
     "createdRow": function(row, data, dataIndex) { 
      if (data["column_index"] == "column_value") { 
       $(row).css("background-color", "Orange"); 
       $(row).addClass("warning"); 
      } 
     }, 
     // ... 
    }); 
+1

這對我有用,但我不得不指定「column_index」作爲列名(字符串)而不是索引(int)。 – A21 2017-09-08 22:00:07

相關問題