डेटाटेबल्स संख्यात्मक

Question

की बजाय तारों को टाइप करता है I डेटाटेबल्स कॉलम में संख्या दिखाने के लिए jquery.datatables का उपयोग कर रहा हूं। संख्याओं को हजारों इकाई (जैसे 123 456 789) के बीच रिक्त स्थान के रूप में स्वरूपित किया गया है। दुर्भाग्यवश, यह संख्या स्वरूपण स्ट्रिंगसंख्या सॉर्टिंग के बजाय सॉर्टिंग (इस प्रश्न के अंत में स्क्रीनशॉट देखें) साबित करता है।

मैं पहचान की है कि:

• function _fnSort(oSettings, bApplyClasses) { छँटाई के लिए मुख्य कार्य है।
• इस समारोह में, गतिशील दृष्टिकोण छँटाई समारोह प्रयोग किया जाता है (एक निष्पादित करता है, तो if (!window.runtime) { सच है)

• स्ट्रिंग छँटाई कार्यों इस्तेमाल किया दो निम्नलिखित कार्य कर रहे हैं।

  /* 
  * text sorting 
  */ 
  "string-asc": function(a, b) { 
      var x = a.toLowerCase(); 
      var y = b.toLowerCase(); 
      return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
  }, 
  
  "string-desc": function(a, b) { 
      var x = a.toLowerCase(); 
      var y = b.toLowerCase(); 
      return ((x < y) ? 1 : ((x > y) ? -1 : 0)); 
  }, 
  

जावास्क्रिप्ट में मेरे ज्ञान बहुत खराब है, क्या सबसे अच्छा तरीका यहां हो सकता है?

1. ट्वीक संख्या हजारों मामले स्वरूपित का पता लगाने, और तुलना करने के लिए स्ट्रिंग छँटाई समारोह (मुझे लगता है कि यह बहुत बड़े डेटा सेट पर धीमी गति से हो जाएगा)।
2. संख्या हजारों प्रारूपित के लिए समर्पित एक संख्यात्मक सॉर्टिंग फ़ंक्शन प्रदान करें? उस स्थिति में
   • आप इसे कैसे कोड करेंगे?
   • इस विशेष संख्यात्मक सॉर्टिंग फ़ंक्शन का उपयोग करने के लिए मैं कोर सॉर्टिंग फ़ंक्शन को कैसे इंगित कर सकता हूं?

यहाँ अब तक की तरह छँटाई नज़र है:

var sortFunction=function(a, b)​{ 
    var ia = parseInt(a.split(' ').join(''), 10); 
    var ib = parseInt(b.split(' ').join(''), 10); 
    return ia-ib; 
}; 

टेस्ट:

Answer 1

मूल्यों इस तरह का क्रमबद्ध करने के लिए, तो आप इस तरह समारोह का उपयोग कर सकते :

var data = ['3 333', '100 333', '22 000', '1 333']; 
console.log(data.sort(sortFunction)); 

मूल्यों की उचित संख्या के साथ, यह पर्याप्त तेज़ होगा। यदि आपको प्रदर्शन समस्याओं का पता नहीं चलता है तो आपको डेटा को समृद्ध करने की कोशिश नहीं करनी चाहिए।

संपादित करें:

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
    "formatted_numbers-pre": function (a) { 
     a = (a==="-") ? 0 : a.replace(/[^\d\-\.]/g, ""); 
     return parseFloat(a); 
    }, 

    "formatted_numbers-asc": function (a, b) { 
     return a - b; 
    }, 

    "formatted_numbers-desc": function (a, b) { 
     return b - a; 
    } 
}); 

इस एक्सटेंशन जोड़ देने के बाद, आप बस अपने स्तंभ के sType सेट करने के लिए:

वास्तव में, the documentation एक उपयुक्त (समान) छँटाई समारोह का प्रस्ताव।

Answer 2

ठीक है, बहुत सारी खोज के बाद, मुझे एक वैकल्पिक समाधान मिला।द्वारा प्रस्तावित समाधान dystroy और एलन जार्डिन निश्चित रूप से क्लीनर है। लेकिन इसका मतलब है कि एचटीएमएल को छूना और my case में, एचटीएमएल को छूने वाले मुश्किल संदेश बॉक्स को छूएं।

तो मेरी समाधान सिर्फ जावास्क्रिप्ट स्ट्रिंग algo छँटाई को छूने के लिए, संख्यात्मक और शाब्दिक मामलों के बीच स्विच करने के लिए है। काश यह isDigit(sa.charAt[0]) जैसे कुछ उपयोग करके क्लीनर हो सकता है लेकिन यह मेरे सभी प्रयासों के बावजूद काम नहीं करता है। कम से कम इस समाधान काम करता है और किसी भी ध्यान देने प्रदर्शन लागत संकेत नहीं करता है:

/* 
    * text + integer sorting 
    */ 
    "string-asc": function(a, b) { 
     var sa = a.toString(); 
     if(sa.length > 0) { 
      // Don't know why, isDigit(sa.charAt[0]) doesn't work?? 
      var ca = sa.substring(0,1); 
      if(ca === "0" || ca === "1" || ca === "2" || ca === "3" || ca === "4" || ca === "5" || ca === "6" || ca === "7" || ca === "8" || ca === "9") { 
      var x1 = parseInt(a.split(' ').join(''), 10); 
      var y1 = parseInt(b.split(' ').join(''), 10); 
      return x1 - y1; 
      } 
     } 
     var x = a.toLowerCase(); 
     var y = b.toLowerCase(); 
     return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
    }, 

    "string-desc": function(a, b) { 
     var sa = a.toString(); 
     if(sa.length > 0) { 
      var ca = sa.substring(0,1); 
      if(ca === "0" || ca === "1" || ca === "2" || ca === "3" || ca === "4" || ca === "5" || ca === "6" || ca === "7" || ca === "8" || ca === "9") { 
       var x1 = parseInt(a.split(' ').join(''), 10); 
       var y1 = parseInt(b.split(' ').join(''), 10); 
       return y1 - x1; 
      } 
     } 
     var x = a.toLowerCase(); 
     var y = b.toLowerCase(); 
     return ((x < y) ? 1 : ((x > y) ? -1 : 0)); 
    }, 

Answer 3

किसी को भी कि है संख्याओं के बीच अंतरिक्ष के लिए पूरा जवाब यह पढ़ रहे हैं और चाहते हैं के लिए:

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
     "formatted_numbers-pre": function (a) { 
     a = (a===" ") ? 0 : a.replace(/[^\d\-\.]/g, ""); 
     return parseFloat(a); 
     }, 

     "formatted_numbers-asc": function (a, b) { 
     return a - b; 
     }, 

     "formatted_numbers-desc": function (a, b) { 
     return b - a; 
     } 
    }); 

    $('.myTable').DataTable({ 
     "columnDefs": [ 
     { "type": "formatted_numbers", "targets": 4 } 
     ], 
    }); 
    } 

Answer 4

आप सेट दशमलव बिंदु जब इस तरह DataTable निर्माण:

var main_table = $('#main_list').DataTable({ 
    ajax: { 
     url: "/api/your/data", 
     dataSrc: '' 
    }, 
    columns: [ 
     { data: "Col1" }, 
     { data: "Col2" }, 
     { data: "Col3" }, 
     { data: "Col4" } 
    ], 
    language: { 
     /* -----> */ "decimal": ",", // <--------- 
     "emptyTable": "Keine Daten in der Tabelle verfügbar", 
     "info": "Anzeigen von _START_ bis _END_ von _TOTAL_ Einträgen", 
     "infoEmpty": "Anzeigen von 0 bis 0 von 0 Einträgen", 
     "infoFiltered": "(filtriert von_MAX_ Gesamteinträge)", 
     "infoPostFix": "", 
     /* -----> */ "thousands": ".", // <--------- 
     "lengthMenu": "_MENU_ Einträge anzeigen", 
     "loadingRecords": "Laden...", 
     "processing": "Verarbeitung...", 
     "search": "Suche:", 
     "zeroRecords": "Keine passenden Datensätze gefunden", 
     "paginate": { 
      "first": "Erste", 
      "last": "Letzte", 
      "next": "Nächste", 
      "previous": "Vorherige" 
     }, 
     "aria": { 
      "sortAscending": ": aufsteigend sortieren", 
      "sortDescending": ": absteigend sortieren" 
     } 
    }, 
    columnDefs: [ 
     {//set german formatting 

      render: function (data, type, row) { 
       return formatDE(data,2); 
      }, 
      targets: [2, 4, 5] 
     }, 
     { 

      render: function (data, type, row) { 
       return formatDE(data,0); 
      }, 
      targets: [3] 
     } 
    ], 
    pageLength: 50}); 

आप jquery.dataTables.js में और अधिक में खुदाई, तो आप पाएंगे कि वे एक समारोह है जो हर स्तंभ के प्रकार निर्धारित करता है कि मूल्य