web-dev-qa-db-ja.com

コンテンツに基づいてjqueryデータテーブルのセル背景を変更する

私は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",
   });
});
jqueryjquery-pluginsdatatables
12
Gabor Forgacs
$('table:last tr:nth-child(2) td:nth-child(2)').
  css("background-color", "#cccccc");
2
Tom Maeckelberghe

質問はすでに回答済みですが、次のように、さまざまなセルに「条件付き書式」を適用する方法を共有したいと思いました。

まず、データテーブルの初期化中に各列にクラスを追加しました。

"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");

それは私にとって非常にうまくいきました。

7
mbeasley

セルの背景色は、セルの値に応じて動的に変更できます。

{"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;
                                          } },
4
AntonyManoj

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);
        }
    }
],
0
devlin carnate

私はこれをテストしていませんが、このようなものはあなたにアイデアを与えるはずです：

// 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");
0
Caner

これは私のために働いた。 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');
    }

}
0
Odysseus Ithaca