डेटाटेबल्स: मूल्यों के आधार पर सेल रंग बदलें

मैं एक इंटरैक्टिव टेबल बनाने के लिए डेटाटेबल का उपयोग कर रहा हूं। मेरे पास 9 कॉलम हैं, जिनमें से 5 मूल्य हैं। मैं प्रत्येक सेल के पृष्ठभूमि रंग को उनके विशिष्ट के आधार पर बदलना चाहता हूं।डेटाटेबल्स: मूल्यों के आधार पर सेल रंग बदलें

मैंने पूरी पंक्ति रंग को पहले बदलने की कोशिश करनी शुरू कर दी है क्योंकि यह एक आसान काम की तरह लग रहा था। हालांकि मुझे कुछ भी बदलने के लिए नहीं मिल सकता है।

मेरे कोड के नीचे है:

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

मैं भी निम्न फ़ंक्शन का उपयोग करने की कोशिश की, लेकिन कोई किस्मत के लिए है। यदि कोई भी मदद कर सकता है तो यह बहुत ही प्रशंसनीय होगा क्योंकि मैं जावा स्क्रिप्ट के लिए बहुत कुछ हूं। सब से

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

स्रोत

2016-12-09 Amy

यह देख प्रयास करें http://datatables.net/release-datatables/examples/advanced_init/row_callback.html – MVCNoob

जब आप 'डेटाटेबल' प्रारंभिकरण का उपयोग कर रहे हैं तो 1.10 विशिष्ट फ़ंक्शन का उपयोग करें – philantrovert

पहले, DataTable केवल एक बार आरंभ कर देगा। फिर अपने प्रश्न के अनुसार, rowCallback और नहीं fnRowCallBack जिन्हें आप नीचे का उपयोग करें:

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

यहाँ एक fiddle

स्रोत

2016-12-09 07:28:55 philantrovert

मेरे पास वापस आने के लिए धन्यवाद। मैंने उपर्युक्त कोड का उपयोग करने का प्रयास किया है लेकिन यह अभी भी मेरे लिए काम नहीं कर रहा है। मैं इसे कहां डालूं? क्या मैं इसे निम्नलिखित में जोड़ता हूं? क्षमा करें अगर यह मूल लगता है तो मैं इसके लिए बहुत नया हूं। – Amy

@ एमी मेरा सुझाव है कि आप [यहां] (https://www.datatables.net/examples/index) से उदाहरण और दस्तावेज़ीकरण पढ़ लें। यह आपको सिंटैक्स और मूल संचालन को पकड़ने की अनुमति देगा। एक समय में एक ही कदम। पहेली की जांच करें और इसे अन्य उदाहरणों से संबंधित करें। – philantrovert

धन्यवाद कि लिंक वास्तव में मदद की है। मैं कोड को गलत जगह पर डाल रहा था। वास्तव में आपकी मदद की सराहना करते हैं! – Amy

डेटाटेबल्स: मूल्यों के आधार पर सेल रंग बदलें

उत्तर

संबंधित मुद्दे