Sort table by column after a service call

Question

Is there any way to sort the following table after it is loaded?

I'm using google api to get distancematrix, but i would like the table to be sorted by distance. This must, however, be done after the service call to google is finished.

While the service is finishing I'll just use a loading icon, then show the table after its done.

HTML:

<table class="table">
    @foreach (var item in Model.res)
    {
        <tr>
            <td class="nameWidth">› <a href="@Url.Action("resDetails", "FindLocation", new { id = @item.Id }, null)"><b>@item.Name</b></a></td>
            <td style="width: 24%">
                <div data-name="@item.Name" data-address="@item.Address @item.City" class="distance">
                    Loading...
                </div>
            </td>
            <td><a class="takeMeThere" id="mapButton" onclick="findDirections('@item.Address @item.City')">KART</a></td>
        </tr>
    }
</table>

<script>
       calculateDistance();

function calculateDistance()
{
    $(".distance").each(function ()
    {
        var name = $(this).data("name");
        var adr = $(this).data("address");
        if (name != null && adr != null)
            getDistance(adr, name, $(this));
    });
}

function getDistance(address, name, obj)
{
    var origin = new google.maps.LatLng(userLat, userLong);
    if (userLat == 0 || userLong == 0) console.log("Klarte ikke hente din posisjon");
    var service = new google.maps.DistanceMatrixService();

    service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [address],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false
    }, function (response, status)
    {
        var distance = response.rows[0].elements[0].distance;
        if (distance) obj.html(distance.text);
        else obj.html("Ikke funnet");
    });
}
</script>

Answer 1

I suppose you can handle the event when all inline requests for distances are finished, and then you have a complete table to sort.

You can use some of iQuery plugin for inplace table sorting, for example: tablesorter or sortElements, mentioned in another answer.

If you don't want to use plugins, just write a sorting function and feed table rows as objects into it, after that replace table body with rows generated from sorted array. Something like this (not using jQuery), for sorting by any column:

var objectArrayIndex = 0;
var myObjectArray = new Array();

init($(your_table_selector));
myObjectSort(myObjectArray,objectArrayIndex,sortColumn);

function myObject() {
    for (var i = 0; i<myObject.arguments.length; i++)
        this['n' + i] = myObject.arguments[i];
}

function init(tab) {
  var obj;
  var r, c, e;
  for (r = 0; r < tab.rows.length; ++r) {
    for (c = 0; c < tab.rows[r].cells.length; ++c) {
      e = tab.rows[r].cells[c];
      if(c == 0) {
        myObjectArray[objectArrayIndex] = new myObject(e.innerHTML);
        obj = myObjectArray[objectArrayIndex++];
      }
      else {
        obj['n' + c] = e.innerHTML;
      }
    }
  }
}

function myObjectSort(arrayName,length,column) {
  // your preferred sorting algoritm run against arrayName['n'+column]
}