Datatables: Zmień kolor komórki na podstawie wartości

Używam DataTable do utworzenia interaktywnego stołu. Mam 9 kolumn, z których 5 to wartości. Chcę zmienić kolor tła każdej komórki na podstawie jej specyfiki.Datatables: Zmień kolor komórki na podstawie wartości

Zacząłem od próby zmiany całego koloru wiersza, ponieważ wydawało się to łatwiejszym zadaniem. Jednak nie mogę nic zmienić.

Moje kodu jest poniżej:

<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>

Próbowałem również stosując następującą funkcję, ale bez powodzenia. Jeśli ktokolwiek mógłby pomóc, byłby bardzo appriciataed jak jestem bardzo do skryptu Java.

$(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'); 
       } 
      } 
     });

Źródło

2016-12-09 Amy

Spróbuj widząc to http://datatables.net/release-datatables/examples/advanced_init/row_callback.html – MVCNoob

Używaj specyficznej funkcji 1.10, gdy używasz inicjalizacji "DataTable" – philantrovert

Przede wszystkim tylko jeden raz zainicjuj DataTable. Potem, jak na swoje pytanie, a nie używać rowCallbackfnRowCallBack jak pokazano poniżej:

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'); 
    } 
    } 
});

Oto fiddle

Źródło

2016-12-09 07:28:55 philantrovert

Dziękuję za skontaktowanie się ze mną. Próbowałem używać powyższego kodu, ale nadal nie działa dla mnie. Gdzie go wstawić? Czy mogę dodać to z następującymi? Przepraszam, jeśli wydaje się to proste, jestem bardzo nowy w tym. – Amy

@Amy Proponuję przeczytać przykłady i dokumentację z [tutaj] (https://www.datatables.net/examples/index). Umożliwi to uzyskanie składni i podstawowej operacji. Krok po kroku. Sprawdź skrzypce i odnieś je do innych przykładów. – philantrovert

Dziękuję, że link naprawdę pomógł. Umieściłem kod w niewłaściwym miejscu. Naprawdę doceniam twoją pomoc! – Amy

Datatables: Zmień kolor komórki na podstawie wartości

Odpowiedz

Powiązane problemy