私はdatatablesを初めて使用します- http://datatables.net/ -。セルの位置と内容に基づいてセルの背景色を変更する方法の例を見つけるのに苦労しています。
選択した行の強調表示が、背景色が変更されたセルで「オーバーカラー」になっていることを除いて、このようなものは私にとってはうまくいきました。 fnRowCallbackで行のクラス名を取得できれば、それを処理できます。
$(document).ready(function() {
// Add a click handler to the rows - this could be used as a callback
$("#example tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function() {
$(this.nTr).removeClass('row_selected');
});
(event.target.parentNode).addClass('row_selected');
});
oTable = $('#example').dataTable({
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).children().each(function(index, td) {
if (index == 6) {
if ($(td).html() === "pending") {
$(td).css("background-color", "#078DC6");
} else if ($(td).html() === "rendering") {
$(td).css("background-color", "#FFDE00");
} else if ($(td).html() === "success") {
$(td).css("background-color", "#06B33A");
} else if ($(td).html() === "failure") {
$(td).css("background-color", "#FF3229");
} else {
$(td).css("background-color", "#FF3229");
}
}
});
return nRow;
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing.php",
"sPaginationType": "full_numbers",
});
});
$('table:last tr:nth-child(2) td:nth-child(2)').
css("background-color", "#cccccc");
質問はすでに回答済みですが、次のように、さまざまなセルに「条件付き書式」を適用する方法を共有したいと思いました。
まず、データテーブルの初期化中に各列にクラスを追加しました。
"aoColumns": [{
"mDataProp": "serial",
"sClass": "serial"
}, {
"mDataProp": "us",
"sClass": "us"
}...],
次に、再描画のたびに呼び出されるaddFormat()関数を作成しました(リアルタイムで更新されるライブテーブルがあるため、この方法で行う必要がありました)。
"fnDrawCallback": function(oSettings) { addFormat(); },
AddFormat関数では、基本的に、CSSクラスを介してすべてのフォーマットルールを定義しました。正規表現などで非常に具体的なルールを適用するために、 jQuery:contains extension を使用しました。これらのルールのセレクターはtd
であり、データテーブルの初期化中に列に割り当てたクラスは次のとおりです。
$("td.us:containsRegex(/^[xtfv]$/)").addClass("s4 queue");
それは私にとって非常にうまくいきました。
セルの背景色は、セルの値に応じて動的に変更できます。
{"mData": "index", "sClass": "center" ,"fnRender": function(obj) {
var index = obj.aData.index;
var isActive = obj.aData.isActivated;
if(isActive == true){
obj.oSettings.aoColumns[obj.iDataColumn].sClass = "greenBackground"
}else{
obj.oSettings.aoColumns[obj.iDataColumn].sClass = "yellowBackground"
}
return index;
} },
DataTables 1.10+構文 を使用して、createdCell
を介してセルを条件付きでスタイル設定する方法を次に示します。
"columnDefs": [
{
"targets": [6],
"createdCell": function(td, cellData, rowData, row, col) {
var color;
switch(cellData) {
case "pending":
color = '#078DC6';
break;
case "success":
color = '#FFDE00';
break;
case "failure":
color = '#06B33A';
break;
default:
color = '#FF3229';
break;
}
$(td).css('background',color);
}
}
],
私はこれをテストしていませんが、このようなものはあなたにアイデアを与えるはずです:
// Change i-th row j-th column
var rows = document.getElementById("myTable").getElementsByTagName('tr');
var columns = rows[i].getElementsByTagName('td');
jQuery( columns[j] ).css("background-color", "#cccccc");
これは私のために働いた。 data [3]は、私たちが見ている行の列4を意味します(javascriptの配列はゼロベースである、つまりゼロから番号が付けられることを忘れないでください)。ただし、セルの背景を変更する場合は、.eq(3)構文を使用します。
"createdRow": function ( row, data, index ) {
if ( data[3] == "pending" ) {
$('td', row).eq(3).css('background-color', '#078DC6');
}
if ( data[3] == "rendering") {
$('td', row).eq(3).css('background-color', '#FFDE00');
}
}