在服務調用後按列排序

Question

加載後有任何方法對下表進行排序嗎？

我使用谷歌API來獲取distancematrix，但我想表由距離進行排序。但是，這必須在完成對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> 

Answer 1

我想你能處理該事件時距離內聯的所有請求都完了，然後你有一個完整的表進行排序。

您可以使用一些iQuery插件進行就地表格排序，例如：tablesorter或sortElements，在another answer中提到。

如果您不想使用插件，只需編寫一個排序函數並將表格行作爲對象填充到表格中，然後用排序數組生成的行替換表格主體。像這樣的東西（不使用jQuery），用於按列排序：

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] 
}