SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Use dataTables to Sort Addresses Ascending

    I am looking to see if you can have jquery data-tables columns sorted by alpha ascending and then the numeric ascending afterwards. The following is the way I have it displaying with the general sort alphabetically. This is the code below that I am currently using. They are also links so i know sorting num wont work It will sort the col ascending but like this

    1 My Home,
    11 My Home,
    23 My Home,
    4 My Home,
    My Home 4,

    I am looking to get it like this

    1 My Home,
    4 My Home,
    11 My Home,
    23 My Home,
    My Home 4,

    HTML Code:
    var dataTableDefaults = {
        "fnDrawCallback" : function () {
        },
        "aLengthMenu": [
        [10, 15, 25, 50, 100, -1],
        [10, 15, 25, 50, 100, "All"]
        ],
        "iDisplayLength": 25,
        "oLanguage": {
            "sLengthMenu": "_MENU_ Records per page",
            "sInfo": "_START_ - _END_ of _TOTAL_",
            "sInfoEmpty": "0 - 0 of 0",
            "oPaginate": {
                "sPrevious": "Prev",
                "sNext": "Next"
            }
        },
        "aoColumnDefs": [{
            'bSortable': false,
            'aTargets': [-1]
        }],
    }
     
    $('#sort_col_3').dataTable($.extend(true, {}, dataTableDefaults, {
        'aaSorting': [[2,'asc']]
    }));

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I'm not sure if this is possible or not, but if you could post a link to a page where I can see it not working, I don't mind taking a look.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    I'm not sure if this is possible or not, but if you could post a link to a page where I can see it not working, I don't mind taking a look.
    Hi thank you.

    This is a jsbin of the work http://jsbin.com/iJoDUtI/1/

    As you can see 115 Osbourne Promenade is at the top while it should be displaying at the bottom

    Thanks

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    You need to do this using Numbers with HTML (see: http://www.datatables.net/plug-ins/sorting).

    Given the table you posted previously, your entire initialization code should be:

    Code JavaScript:
    jQuery.extend( jQuery.fn.dataTableExt.oSort, {
        "num-html-pre": function ( a ) {
            var x = String(a).replace( /<[\s\S]*?>/g, "" );
            return parseFloat( x );
        },
     
        "num-html-asc": function ( a, b ) {
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        },
     
        "num-html-desc": function ( a, b ) {
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    } );
     
    $('#sort_col_3').dataTable({
      "aoColumnDefs": [ 
       { "sType": "num-html", "aTargets": [ 2 ] }
     ], 
     'aaSorting': [[2,'asc']]
    });

    HTH

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Just to be complete, here's the entire code:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset=utf-8 />
        <title>Data tables example</title>
        <link rel="stylesheet" href="http://datatables.net/media/blog/bootstrap_2/DT_bootstrap.css">
      </head>
    
      <body>
        <table class="table table-hover table-advance" id="sort_col_3">
          <thead>
            <tr>
              <th width="10%">ID</th>
              <th width="10%">Reference</th>
              <th width="30%">Address</th>
              <th width="20%">Tenants</th>
              <th width="15%">Rent Balance (&pound;)</th>
              <th width="15%">Landlord Balance (&pound;)</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>0000037</td>
              <td></td>
              <td><a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/37">18 Daly Park, Newry, BT35 9PJ</a></td>
              <td></td>
              <td>0.00</td>
              <td>0.00</td>
              <td class="list-action">
              <a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/37"><i class="fa fa-search"></i></a>
              </td>
            </tr>
            <tr>
              <td>0000036</td>
              <td></td>
              <td><a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/36">115 Osborne Prominade, Crossmaglen,</a></td>
              <td></td>
              <td>0.00</td>
              <td>0.00</td>
              <td class="list-action">
              <a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/36"><i class="fa fa-search"></i></a>
              </td>
            </tr>
            <tr>
              <td>0000038</td>
              <td></td>
              <td><a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/38">12 rathgannon, Warrenpoint, Newry, BT34 3NQ</a></td>
              <td></td>
              <td>0.00</td>
              <td>0.00</td>
              <td class="list-action">
                <a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/38"><i class="fa fa-search"></i></a>
              </td>
            </tr>
            <tr>
              <td>0000029</td>
              <td>17RATH</td>
              <td><a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/29">17 Rathgannon, Warrenpoint, BT34 3TU</a> </td>
              <td></td>
              <td>0.00</td>
              <td>0.00</td>
              <td class="list-action">
                <a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/29"><i class="fa fa-search"></i></a>
              </td>
            </tr>
            <tr>
              <td>0000030</td>
              <td>18RATH</td>
              <td><a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/30">18 Rathgannon, Warrenpoint, BT34 3TU</a> </td>
              <td></td>
              <td>0.00</td>
              <td>0.00</td>
              <td class="list-action">
                <a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/30"><i class="fa fa-search"></i></a>
              </td>
            </tr>
            <tr>
              <td>0000031</td>
              <td></td>
              <td><a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/31">19 Rathgannon, Warrenpoint, BT34 3TU</a> </td>
              <td></td>
              <td>0.00</td>
              <td>0.00</td>
              <td class="list-action">
                <a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/31"><i class="fa fa-search"></i></a>
              </td>
            </tr>
            <tr>
              <td>0000034</td>
              <td></td>
              <td><a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/34">12 Riverfields, Warrenpoint, BT34 3FQ</a></td>
              <td></td>
              <td>0.00</td>
              <td>0.00</td>
              <td class="list-action">
                <a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/34"><i class="fa fa-search"></i></a>
              </td>
            </tr>
            <tr>
              <td>0000033</td>
              <td></td>
              <td><a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/33">21 Riverfields, Warrenpoint, BT34 3FQ</a></td>
              <td></td>
              <td>0.00</td>
              <td>0.00</td>
              <td class="list-action">
                <a href="http://belfast.showhouseapp.local/residential-lettings/properties/view/property/33"><i class="fa fa-search"></i></a>
              </td>
            </tr>
          </tbody>
        </table>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>
        <script>
          jQuery.extend( jQuery.fn.dataTableExt.oSort, {
            "num-html-pre": function ( a ) {
              var x = String(a).replace( /<[\s\S]*?>/g, "" );
              return parseFloat( x );
            },
    
            "num-html-asc": function ( a, b ) {
              return ((a < b) ? -1 : ((a > b) ? 1 : 0));
            },
    
            "num-html-desc": function ( a, b ) {
              return ((a < b) ? 1 : ((a > b) ? -1 : 0));
            }
          });
    
          $('#sort_col_3').dataTable({
            "aoColumnDefs": [ 
             { "sType": "num-html", "aTargets": [ 2 ] }
           ], 
           'aaSorting': [[2,'asc']]
          });
        </script>
      </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works great, thank you. I had tried somthing like that before but I must have been doing it worng

    I have one problem that I had forgot to mention it. If the address doesn't start with a number it needs to ordered alphabetically after the numbers are ordered. Your code will break if the address starts with a letter. Please see my revised jsbin http://jsbin.com/ayELEFot/1/edit

    Maybe this isn't possible to get working as I need it

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Given this list:

    Code:
    17 Rathgannon, Warrenpoint, BT34 3TU
    Aardvark Avenue, London, SW1 3LE
    18 Rathgannon, Warrenpoint, BT34 3TU
    Zacharias Way, London, SW2 3LE 
    19 Rathgannon, Warrenpoint, BT34 3TU
    When sorted in ascending order they would be

    Code:
    17 Rathgannon, Warrenpoint, BT34 3TU
    18 Rathgannon, Warrenpoint, BT34 3TU
    19 Rathgannon, Warrenpoint, BT34 3TU
    Aardvark Avenue, London, SW1 3LE
    Zacharias Way, London, SW2 3LE
    And descending:

    Code:
    Zacharias Way, London, SW2 3LE
    Aardvark Avenue, London, SW1 3LE 
    19 Rathgannon, Warrenpoint, BT34 3TU
    18 Rathgannon, Warrenpoint, BT34 3TU
    17 Rathgannon, Warrenpoint, BT34 3TU
    Is that correct?

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes that is right. Is that possible do you know.
    I have tried reading the documents but they just confuse me more.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Well, you could do this:

    Code:
    "num-html-pre": function ( a ) {
      var x = String(a).replace( /<[\s\S]*?>/g, "" );
      if(parseFloat( x )){
        return parseFloat( x );
      } else {
        var binary = "";
        for (i=0; i < x.length; i++) {
          binary += x[i].charCodeAt(0).toString(2);
        }
        return binary;
      }
    },
    That should do the job and it also takes into account entries that start with the same letter, e.g.

    Code:
    17 Rathgannon, Warrenpoint, BT34 3TU
    Aardvark Avenue, London, SW1 3LE
    18 Rathgannon, Warrenpoint, BT34 3TU
    Zzacharias Way, London, SW2 3LE 
    19 Rathgannon, Warrenpoint, BT34 3TU
    Zacharias Way, London, SW2 3LE
    becomes:

    Code:
    17 Rathgannon, Warrenpoint, BT34 3TU
    18 Rathgannon, Warrenpoint, BT34 3TU
    19 Rathgannon, Warrenpoint, BT34 3TU
    Aardvark Avenue, London, SW1 3LE
    Zacharias Way, London, SW2 3LE
    Zzacharias Way, London, SW2 3LE
    and

    Code:
    Zzacharias Way, London, SW2 3LE
    Zacharias Way, London, SW2 3LE
    Aardvark Avenue, London, SW1 3LE
    19 Rathgannon, Warrenpoint, BT34 3TU
    18 Rathgannon, Warrenpoint, BT34 3TU
    17 Rathgannon, Warrenpoint, BT34 3TU


Tags for this Thread

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
  •