पाद लेख

Question

में डेटाटेबल्स.net तालिका कॉलम योग मुझे अपने कॉलर में "योग" श्रेणी के साथ प्रत्येक कॉलम के योग मान को सम्मिलित करने में एक छोटी सी जानकारी के साथ समस्याएं आ रही हैं।

कोड (कम या ज्यादा DataTables.net से सीधे लिया गया) चला जाता है:

var table = $('#example').DataTable(); 
 
     table.columns('.sum').each(function (el) { 
 
      var sum = table 
 
       .column(el) 
 
       .data() 
 
       .reduce(function (a, b) { 
 
        return parseInt(a, 10) + parseInt(b, 10); 
 
       }); 
 
      $(el).html('Sum: ' + sum); 
 
     });

"राशि" सही मान है, लेकिन किसी भी तरह पाद लेख में सम्मिलित नहीं किया गया है! अर्थात। इसका-निर्धारण खाली दिखाई देता है।

ध्यान दें कि नीचे स्निपेट ठीक काम करता है, लेकिन मैं कक्षा कॉल के साथ प्रत्येक कॉलम को जोड़ना चाहता हूं।

var table = $('#example').DataTable(); 
 
var column = table.column(4); 
 

 
$(column.footer()).html(
 
    column.data().reduce(function (a, b) { 
 
     return parseInt(a, 10) + parseInt(b, 10); 
 
    }) 
 
);

///////////////////////////////////// /////////////////////////////////////////////////

संपादित करें - वर्कअराउंड:

मैं कहाँ DataTable आरंभ नहीं हो जाता करने के लिए कोड में ले जाया गया और इसके बजाय footerCallback साथ चला गया। कोड नीचे देखें:

"footerCallback": function (row, data, start, end, display) { 
 
        var api = this.api(), data; 
 
        
 
        // Remove the formatting to get integer data for summation 
 
        var intVal = function (i) { 
 
         return typeof i === 'string' ? 
 
          i.replace(/[\$,]/g, '') * 1 : 
 
          typeof i === 'number' ? 
 
          i : 0; 
 
        }; 
 

 
        // Total over this page 
 
        pageTotal = api 
 
         .column('.sum', { page: 'current' }) 
 
         .data() 
 
         .reduce(function (a, b) { 
 
          return intVal(a) + intVal(b); 
 
         }, 0); 
 

 
        // Update footer 
 
        $(api.column('.sum').footer()).html(pageTotal); 
 
       }

किसी तरह अब मूल्य सही tfoot तत्व में डाला जाता है। अभी भी कोई विचार नहीं है कि यह पहले स्थान पर क्यों काम नहीं करेगा (लेकिन जैसा कि जेएस-फाइलों सहित टिप्पणी आदेश में उल्लिखित है, उनमें से कुछ के साथ करना पड़ सकता था)।

अब मैं सिर्फ यह पता लगाने की कैसे वर्ग = "योग" के साथ पाश एकाधिक स्तंभों ... को

Answer 1

आपका तालिका में गड़बड़ी कोड निष्पादित करने के लिए केवल जब DataTable आरंभ नहीं हो जाता की जरूरत है, (initComplete संपत्ति देखें)।

यह भी सुनिश्चित करें कि आपके <tfoot></tfoot> ब्लॉक आपके <table> में परिभाषित है अन्यथा कोई पाद लेख नहीं होगा।

नहीं तो आप बहुत समाधान के करीब थे, कृपया को सही कोड नीचे देखें:

var table = $('#ticketTable').DataTable({ 
    'initComplete': function (settings, json){ 
     this.api().columns('.sum').every(function(){ 
      var column = this; 

      var sum = column 
       .data() 
       .reduce(function (a, b) { 
        a = parseInt(a, 10); 
        if(isNaN(a)){ a = 0; }     

        b = parseInt(b, 10); 
        if(isNaN(b)){ b = 0; } 

        return a + b; 
       }); 

      $(column.footer()).html('Sum: ' + sum); 
     }); 
    } 
}); 

एक उदाहरण के लिए this JSFiddle देखें।

अद्यतन

वहाँ भी है footerCallback संपत्ति आप पाद लेख प्रदर्शन कॉलबैक फ़ंक्शन जो हर "आकर्षित" घटना पर बुलाया जाएगा परिभाषित करने देता है।

initComplete और footerCallback के बीच अंतर यह है कि initComplete हर "आकर्षित" घटना पर एक बार और footerCallback कहा जाता है।

आप पूरी तालिका के लिए योग को प्रदर्शित कर रहे हैं, तो initComplete पर्याप्त होना चाहिए। अन्यथा यदि आपको केवल वर्तमान पृष्ठ के लिए प्रासंगिक पाद लेख डेटा में दिखाना आवश्यक है (जैसा कि Footer callback example में), तो इसके बजाय footerCallback का उपयोग करें।

Answer 2

मिक्स। खाली 0

"initComplete": function (settings, json) { 
     this.api().columns('.sum').every(function() { 
      var column = this; 

      var intVal = function (i) { 
       return typeof i === 'string' ? 
       i.replace(/[\$,]/g, '') * 1 : 
        typeof i === 'number' ? 
         i : 0; 
      }; 

      var sum = column 
       .data() 
       .reduce(function (a, b) { 
        return intVal(a) + intVal(b); 
       }); 

      $(column.footer()).html('Sum: ' + sum); 
     }); 
    }