SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery tablesorter.js vs Numerals with Commas

    I'm using jQuery's tablesorter.js to create tables with sortable rows. It works fine on both text and numerals - but only if they have no commas. For example, the following column would sort properly:

    2
    18
    401
    3
    15

    But this column...

    1,200
    408
    26,048

    ...would sort like this:
    1,200
    26,048
    408

    Does anyone know how to fix this?

    I'm using PHP and MySQL to derive my data from a database table, using the following code:

    PHP Code:
    $Area number_format($row["Area"]); 
    Then I simply insert $Area in a dynamic table cell, like so...

    <td>$Area</td>

    I posted my JavaScript links below. Thanks for any tips!

    * * * * *

    Code:
    <script src="http://Geobop/2B/js/jquery-1.3.1.min.js" type="text/javascript"></script>
    <script src="http://Geobop/2B/js/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/JavaScript">
     $(document).ready(function() 
      { 
      $("#myTable").tablesorter({ widgets: ['zebra']} );
    
    $("#triggerMS").click(function(){
     $("#menuMS").show();
     return false;
    });
    $("#menuMS").click( function(){
     $("#menuMS").hide();
     return true;
    });
    
    $("#triggerReg").click(function(){
     $("#menuReg").show();
     return false;
    });
    $("#menuReg").click( function(){
     $("#menuReg").hide();
     return true;
    });
    
    $("#triggerKids").click(function(){
     $("#menuKids").show();
     return false;
    });
    $("#menuKids").click( function(){
     $("#menuKids").hide();
     return true;
    });
    
    $("#triggerLinks").click(function(){
     $("#menuLinks").show();
     return false;
    });
    $("#menuLinks").click( function(){
     $("#menuLinks").hide();
     return true;
    });
    
    $("#triggerBooks").click(function(){
     $("#menuBooks").show();
     return false;
    });
    $("#menuBooks").click( function(){
     $("#menuBooks").hide();
     return true;
    });
    
      }
     );
    </script>

  2. #2
    SitePoint Addict ChiefLee's Avatar
    Join Date
    Apr 2009
    Location
    Lawrence KS
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With tablesorter, you can pass in a callback to process the data to be sorted before it's sorted, so you could just have it strip the commas before sorting, using something like:

    $('#mytable').tableSorter({'textExtraction': function(val) { return val.replace(',', '', 'g') }});

    The option is called textExtraction and is documented at http://tablesorter.com/docs/
    Add your logo to Pocket Folders.

  3. #3
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChiefLee View Post
    With tablesorter, you can pass in a callback to process the data to be sorted before it's sorted, so you could just have it strip the commas before sorting, using something like:

    $('#mytable').tableSorter({'textExtraction': function(val) { return val.replace(',', '', 'g') }});

    The option is called textExtraction and is documented at http://tablesorter.com/docs/
    Thanks, I'll have a look at that.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Here's a solution from http://groups.google.com/group/jquer...3eac2244?pli=1

    Code javascript:
    $.tablesorter.addParser({ 
        id: "commaNum", 
        is: function(s) { 
            return /^[\d-]?[\d,]*(\.\d+)?$/.test(s); 
        }, 
        format: function(s) { 
            return s.replace(/,/g,''); 
        }, 
        type: 'numeric' 
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips, but I don't understand how to implement them. I've been playing with them a little, with no success. I found a possible solution at
    http://tablesorter.com/docs/example-...xtraction.html

    Code:
    $(document).ready(function() { 
         
        // call the tablesorter plugin 
        $("table").tablesorter({ 
            // define a custom text extraction function 
            textExtraction: function(node) { 
                // extract data from markup and return it  
                return node.childNodes[0].childNodes[0].innerHTML; 
            } 
        }); 
    });
    I tried inserting it the JS code in my head section, like this:

    PHP Code:
    echo '<script src="'.$BaseURL.'/2B/js/jquery-1.3.1.min.js" type="text/javascript"></script>
    <script src="'
    .$BaseURL.'/2B/js/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/JavaScript">

    $(document).ready(function() { 
         
        // call the tablesorter plugin 
        $("table").tablesorter({ 
            // define a custom text extraction function 
            textExtraction: function(node) { 
                // extract data from markup and return it  
                return node.childNodes[0].childNodes[0].innerHTML; 
            } 
        }); 
    });

     $(document).ready(function() 
      { 
      $("#myTable").tablesorter({ widgets: [\'zebra\']} );

    $("#triggerMS").click(function(){
     $("#menuMS").show();
     return false;
    });
    $("#menuMS").click( function(){
     $("#menuMS").hide();
     return true;
    });

    $("#triggerReg").click(function(){
     $("#menuReg").show();
     return false;
    });
    $("#menuReg").click( function(){
     $("#menuReg").hide();
     return true;
    });

    $("#triggerKids").click(function(){
     $("#menuKids").show();
     return false;
    });
    $("#menuKids").click( function(){
     $("#menuKids").hide();
     return true;
    });

    $("#triggerLinks").click(function(){
     $("#menuLinks").show();
     return false;
    });
    $("#menuLinks").click( function(){
     $("#menuLinks").hide();
     return true;
    });

    $("#triggerBooks").click(function(){
     $("#menuBooks").show();
     return false;
    });
    $("#menuBooks").click( function(){
     $("#menuBooks").hide();
     return true;
    });'

    Next, I tried this, playing with the closing brackets:

    PHP Code:
    echo '<script src="'.$BaseURL.'/2B/js/jquery-1.3.1.min.js" type="text/javascript"></script>
    <script src="'
    .$BaseURL.'/2B/js/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/JavaScript">
     $(document).ready(function() 
      { 
      $("#myTable").tablesorter({ widgets: [\'zebra\']} );


        // call the tablesorter plugin 
        $("table").tablesorter({ 
            // define a custom text extraction function 
            textExtraction: function(node) { 
                // extract data from markup and return it  
                return node.childNodes[0].childNodes[0].innerHTML; 
            } 

    $("#triggerMS").click(function(){
     $("#menuMS").show();
     return false;
    });
    $("#menuMS").click( function(){
     $("#menuMS").hide();
     return true;
    }); 
    But I haven't found a configuration that works. Thanks for any tips.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •