Question

加载后有没有办法对下表进行排序？ enter image description here

我正在使用google api来获取distancematrix，但我希望按距离对表格进行排序。但是，必须在完成对谷歌的服务调用后完成此操作。

当服务完成时，我将只使用加载图标，然后在完成后显示该表。

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

在服务调用之后按列对表进行排序

1 个答案: