Datatables: Değerleri temel alarak hücre rengini değiştir

Etkileşimli bir tablo oluşturmak için DataTable kullanıyorum. 5 tanesi değer olan 9 sütunum var. Her hücrenin arka plan rengini, spesifiklerine göre değiştirmek istiyorum.Datatables: Değerleri temel alarak hücre rengini değiştir

Tüm satır rengini değiştirmeyi denemeye başladım, çünkü bu daha kolay bir görev gibi görünüyordu. Ancak değişecek hiçbir şey alamıyorum.

Benim kod aşağıda:

<head> 
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>  

    <script> 
     $(document).ready(function(){ 
      $('#countryTable').DataTable(); 
     }); 
    </script> 

    <script> 
     $(document).ready(function() { 
     $('#countryTable ').DataTable({ 
      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
       if (aData[3] > 11.7) 
       { 
        $(nRow).css('color', 'red') 
       } 
       else if (aData[2] == "4") 
       { 
        $(nRow).css('color', 'green') 
       } 
      } 
     }); 
    </script> 

</head> 

<body>  

    <table id ="countryTable" class="display" cellspacing="0" data-page-length='193'> 
<thead> 
    <tr> 
     <th>Rank</th> 
     <th>Country</th> 
     <th>Code</th> 
     <th>Total</th> 
     <th>Beer</th> 
     <th>Wine</th> 
     <th>Spirits</th> 
     <th>Other</th> 
     <th>Score</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>1</td> 
     <td>Estonia</td> 
     <td>EE</td> 
     <td>14.97</td> 
     <td>5.87</td> 
     <td>1.65</td> 
     <td>5.64</td> 
     <td>1.81</td> 
     <td>3 - Medium Risky</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Belarus</td> 
     <td>BY</td> 
     <td>14.44</td> 
     <td>2.5</td> 
     <td>0.75</td> 
     <td>6.73</td> 
     <td>4.46</td> 
     <td>4 - Very Risky</td> 
    </tr> 

</tbody>

şunlarla fonksiyonu kullanılarak çalıştı ama hayır şans gerekecek. Herhangi biri yardımcı olabilirse, java betiğine çok alışkın olduğum için çokça uygulamalıdır.

$(document).ready(function() { 
     $('#countryTable').DataTable({ 
      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
       if (aData[3] == "5") 
       { 
        $('td', nRow).css('background-color', 'Red'); 
       } 
       else if (aData[3] == "4") 
       { 
        $('td', nRow).css('background-color', 'Orange'); 
       } 
      } 
     });

kaynak

2016-12-09 Amy

bu gördükten deneyin http://datatables.net/release-datatables/examples/advanced_init/row_callback.html – MVCNoob

'DataTable' başlatılırken 1.10'a özgü işlevi kullanın – philantrovert

Her şeyden önce, DataTable'u yalnızca bir kez başlat. Sonra sorunuza göre, aşağıda gösterildiği gibi rowCallback değil fnRowCallBack kullanın: Burada

var oTable = $('#countryTable').DataTable({ 
    'rowCallback': function(row, data, index){ 
    if(data[3]> 11.7){ 
     $(row).find('td:eq(3)').css('color', 'red'); 
    } 
    if(data[2].toUpperCase() == 'EE'){ 
     $(row).find('td:eq(2)').css('color', 'blue'); 
    } 
    } 
});

olan bir fiddle

kaynak

2016-12-09 07:28:55 philantrovert

Bana geri döndüğün için teşekkür ederim. Yukarıdaki kodu kullanmaya çalıştım ama hala benim için çalışmıyor. Nereye yerleştirmeliyim? Aşağıdakileri ekledim mi? Üzgünüm Temel görünüyorsa, bunun için çok yeniyim. – Amy

@Amy Örnekleri ve belgeleri buradan [https://www.datatables.net/examples/index] okuyun. Bu, sözdizimini ve temel işlemi tutmanıza olanak tanır. Adım adım. Kemanı kontrol et ve diğer örneklerle ilişkilendir. – philantrovert

Bu bağlantıya gerçekten yardımcı olduğunuz için teşekkür ederiz. Kodu yanlış yere koyuyordum. Gerçekten yardımın için teşekkürler! – Amy

Datatables: Değerleri temel alarak hücre rengini değiştir

cevap

İlgili konular