javascript - 服务调用后按列排序表

Question

加载后有什么方法可以对下表进行排序？

我正在使用 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>

Answer 1

我想您可以在所有内联距离请求完成后处理该事件，然后您有一个完整的表格要排序。

您可以使用一些 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]
}