加载后有什么方法可以对下表进行排序?
我正在使用 google api 来获取距离矩阵,但我希望表格按距离排序。但是,这必须在对 google 的服务调用完成后完成。
当服务完成时,我将只使用一个加载图标,然后在完成后显示表格。
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>