Use dataTables to Sort Addresses Ascending

JavaScript
1

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,

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

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

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

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:

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

Just to be complete, here’s the entire 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

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

Hi there,

Given this list:

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

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:

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

Yes that is right. Is that possible do you know.
I have tried reading the documents but they just confuse me more.

9

Well, you could do this:

"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.

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:

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

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