2013-11-01 9 views
7

मेरे पास एक HTML तालिका है जो datatables.js का उपयोग करती है और सशर्त स्वरूपण को लागू करने का स्पष्ट उदाहरण नहीं ढूंढ पाई है।datatables.js का उपयोग करके मैं सशर्त स्वरूपण कैसे लागू करूं?

मैं स्तंभ 4 में एक सेल के पाठ का रंग कैसे बदल सकता है जब अपने मूल्य == 0 और स्तंभ 5 में मूल्य है! = 0

<script> 
     $(document).ready(function() { 
     $("#GeneratedData").dataTable({ 
      "sDom": 'T<"clear">lrtip', 
      "oTableTools": { 
      "sSwfPath": "http://localhost:5637/Content/swf/copy_csv_xls_pdf.swf" 
      }, 
      "sPaginationType": "full_numbers" 
     }); 
     }) 
</script> 

उत्तर

11

अद्यतन। मूल उत्तर डेटाटेबल 1.9.x को लक्षित कर रहा था। यह अभी भी काम करता है, और काम करता है DataTables के साथ-साथ (अभी तक) 1.10.x के साथ, लेकिन यहाँ एक शुद्ध DataTables 1.10.x संस्करण है:

var table = $('#example').DataTable({ 
    rowCallback: function(row, data, index) { 
    if (data[3]=='0' && data[4]!='0') { 
     $(row).find('td:eq(3)').addClass('color') 
    } 
    } 
}) 

डेमो ->http://jsfiddle.net/2chjxduy/


आप चाहिए इसके लिए fnRowCallback ईवेंट का उपयोग करें। डॉक्स से:

यह समारोह 'पोस्ट प्रक्रिया' प्रत्येक पंक्ति के बाद यह हर तालिका ड्रॉ के लिए उत्पन्न किया गया है करने के लिए आप की अनुमति देता है, लेकिन इससे पहले यह स्क्रीन पर प्रदान की गई है। इस समारोह पंक्ति वर्ग के नाम आदि अपने मामले में

तो स्थापित करने के लिए इस्तेमाल किया जा सकता है, ऐसा करते हैं:

$("#GeneratedData").dataTable({ 
    //your settings as above here 
    fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     if ($(nRow).find('td:eq(3)').text()=='0' && 
      $(nRow).find('td:eq(4)').text()!='0') { 
       $(nRow).find('td:eq(3)').addClass('color'); 
      } 
    } 
}); 

color एक पूर्वनिर्धारित सीएसएस वर्ग है। इसे इस jsfiddle में कार्रवाई में देखें ->http://jsfiddle.net/GfNeA/

+0

वर्तमान संस्करण में विकल्पों द्वारा सेटिंग करते समय, हमने 'createRow' भी बनाया है, जो * अधिक कुशल हो सकता है *)। दोनों विकल्पों के लिए लिंक: https://datatables.net/reference/option/createdRow https://datatables.net/reference/option/rowCallback – edmundo096

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