Javascript 使用jQuery动态排序和显示Ajax数据

我正在进行多个Ajax调用，以从不同的提供商检索保险报价，目的是聚合和排序结果。我的简化代码如下所示：

for (var i = 0; i < providerList.length; i++) {
    $.ajax({
       url : "quote-request/"+ providerList[i] +".php",
       type: "GET",
       data : formData,
       dataType:"json",
       success: function(results) { 
          $.each(results, function(index, value) {
            insertInline(value["provider-name"], value["policy-name"], parseInt(value["grand-total"]));
          })
       }
    });
}

for（变量i=0；i}

我想到了一些可能有效的方法。您可以将总计（排序依据的项目）分配给每个div中的一个属性。然后可以使用jQuery根据总计将项目放置在

结果

div中

因此，当您获得第一项时，您只需将其添加到

results

div中，但您还将为div赋予一个属性（我称之为value，您可以随意调用它），如下所示：

然后，对于所有其他项目，您将获得当前项目的总计，运行现有结果列表，对于每个项目，检查总计，如果您遇到一个子项目的总计大于当前项目的总计，请将当前项目放在该子项目之前

for (var i = 0; i < providerList.length; i++) {
    $.ajax({
       url : "quote-request/"+ providerList[i] +".php",
       type: "GET",
       data : formData,
       dataType:"json",
       success: function(results) { 
          $.each(results, function(index, value) {  

          // no children, so append first time  
          if( $('#results').children.length == 0 ) {    

            // assign attribute value (or whatever name you want) to div
            $("#results").append("<div value=" + value["grand-total"] +">" + value["provider-name"] + value["policy-name"] + value["grand-total"] + "</div>");

          // if there are items in #results
          } else {    
            // assuming this is returned as type integer
            var currentTotal = value["grand-total"];  

            // for every child
            $('#results').children('div').each(function () { 

              // get grand-total from attribute of current div
              var childTotal = this.attr('value');    

              // convert current div's grand total value from string to float, so we can compare values
              childTotal = parseFloat(childTotal);     

              // if the div we're currently at is greater than or equal to the current result total
              if (currentTotal <= childTotal) {        
                // place the current result in front of the div we're at 
                $(this).before("<div value=" + value["grand-total"] +">" + value["provider-name"] + value["policy-name"] + value["grand-total"] + "</div>");                        // place the current result total before the current child
              }
            });
          }
        })
       }
    });
}

for（变量i=0；i如果（currentTotal，您可以使用html5的
data-
attrubute来标记每个结果：


因此，您可以这样创建div：

<div id="results">
    <div data-provider="ProviderA" data-policy="Policy1" data-grandtotal="9.50">ProviderA Policy1 12.34</div>
    <div data-provider="ProviderA" data-policy="Policy2" data-grandtotal="9.50">ProviderA Policy2 9.50</div>
    <div data-provider="ProviderA" data-policy="Policy2" data-grandtotal="22.76" >ProviderB Policy1 22.76</div>
</div>

之后，您可以使用Javascript的排序函数对其进行排序：

然后，您只需要在单击相应的排序按钮时：
*从div获取属性化的
数据-
。
*将它们存储到数组中。
*使用javascript的
Sort（）
函数和正确的回调对它们进行排序。
*从div中删除所有元素。
*迭代数组并将它们追加到div中

你会没事的

PS我使用了最新版本的Jquery（3.1.1），如果您使用早期版本，请将
data（）
函数替换为
attr（）
函数，例如
$（val）.data（'provider'）
将是
$（val）.attr（'data-provider'））
是的，如果可以按顺序直接插入DOM元素，速度会快得多。这是可以做到的。基本上，您可以将DOM用作伪数组，并使用DOM中的
data
属性跟踪您的值。您可以编写一个短脚本来搜索您的值“伪数组”，并找到适当的索引以插入新元素

下面是一个应该适合您的简短函数。我还用计时器上的一些随机数据对它进行了模拟，以显示它将如何工作：

function insertInline(providerName, policyName, grandTotal) {
  var curDomElement;
  var prevDomElement;
  var insertBefore;
  $('#results div').each(function(index) {
    prevDomElement = curDomElement;
    curDomElement = $(this);
    if (parseInt(curDomElement.data('grandtotal')) > grandTotal) {
      insertBefore = curDomElement;
      return false;
    }
  });
  if (insertBefore) {
    $("<div data-grandTotal='" + grandTotal + "'>" + providerName + policyName + grandTotal + "</div>").insertBefore(insertBefore);
  } else {
    $("#results").append("<div data-grandTotal='" + grandTotal + "'>" + providerName + policyName + grandTotal + "</div>");
  }
}

函数插入行（providerName、policyName、grandTotal）{
var凝乳素；
var前置元素；
var-insertBefore；
$（#results div'）。每个（函数（索引）{
prevDomElement=curDomElement；
curdoElement=$（此项）；
if（parseInt（curdoElement.data（'grandtotal'））>grandtotal）{
insertBefore=curdoElement；
返回false；
}
});
如果（插入之前）{
$（“+providerName+policyName+grandTotal+”）.insertBefore（insertBefore）；
}否则{
$（“#结果”）.append（“+providerName+policyName+grandTotal+”）；
}
}

在您的示例中，您基本上会这样使用它：

for (var i = 0; i < providerList.length; i++) {
    $.ajax({
       url : "quote-request/"+ providerList[i] +".php",
       type: "GET",
       data : formData,
       dataType:"json",
       success: function(results) { 
          $.each(results, function(index, value) {
            insertInline(value["provider-name"], value["policy-name"], parseInt(value["grand-total"]));
          })
       }
    });
}

for（变量i=0；i

工作示例：
除了每次重新构建外，我看不到任何其他方法。你可以为每个新条目解析表，并尝试找出它的去向，但这比简单地重新构建应用程序需要更多的过程。你也可以只进行一次调用，获取所有数据，对其进行排序，然后只构建一次表。谢谢Matt，t他的工作非常完美（尽管您在ajax循环中错过了调用函数的结束括号）。除此之外，这是一个很好的解决方案，谢谢。没问题@Calico。我很高兴它能为您工作。感谢您指出缺少的括号。我已编辑了答案以更正它。
for (var i = 0; i < providerList.length; i++) {
    $.ajax({
       url : "quote-request/"+ providerList[i] +".php",
       type: "GET",
       data : formData,
       dataType:"json",
       success: function(results) { 
          $.each(results, function(index, value) {
            insertInline(value["provider-name"], value["policy-name"], parseInt(value["grand-total"]));
          })
       }
    });
}