0

次の表をロード後にソートする方法はありますか? ここに画像の説明を入力

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>
4

1 に答える 1

0

距離に関するすべてのインライン リクエストが終了すると、イベントを処理できると思います。その後、ソートする完全なテーブルができます。

インプレース テーブルの並べ替えに iQuery プラグインの一部を使用できます。たとえば、別の回答で言及されているtablesorterまたは。sortElements

プラグインを使用したくない場合は、並べ替え関数を記述し、テーブル行をオブジェクトとしてフィードします。その後、テーブル本体を並べ替えられた配列から生成された行に置き換えます。任意の列で並べ替えるには、次のようなもの (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]
}
于 2012-11-28T13:10:31.213 に答える