表排序修复

Question

我有一个表中的数据来自多个json API链接。

我的代码目前是

<script src="js/1.js"></script> 
<script src="js/2.js"></script> 

以上，这是一个表的代码。允许对表进行排序。它只有<th>和<thead>标签。

，因为它代表的问题是这样的：

example http://i59.tinypic.com/qmygbb.jpg

我想最好的价格字段进行排序。下面是JS文件

1.js

$.ajax({ 
    type  : 'GET', 
    crossDomain : true, 
    dataType : 'json', 
    url   : 'api link here', 
    success  : function (json) { 
     //var json = $.parseJSON(data);    
     for(var i=0; i<json.results.length; i++) { 
      var section = json.results[i].section; 
      var no = json.results[i].avalible; 
      var price = json.results[i].price; 
      var button = "<button class='redirect-button' data-url='LINK'>Compare</button>"; 
      $("#tableid").append("<tbody><tr><td>"+section+"</td><td>"+no+"</td><td>"+price+"</td><td>"+button+"</td></tr></tbody>"); 
      $("#tableid").find(".redirect-button").click(function(){ 
       location.href = $(this).attr("data-url"); 
      }); 
     } 
    }, 
    error  : function(error){ 
     console.log(error); 
    } 
}); 

和这里的内部第二个JS文件

$.ajax({ 
    type  : 'GET', 
    crossDomain : true, 
    dataType : 'json', 
    url   : '2nd api', 
    success  : function (json) { 
     //var json = $.parseJSON(data); 
     for(var i=0; i<json.results.length; i++) { 
      var section = json.results[i].section; 
      var no = json.results[i].avalible; 
      var price = json.results[i].amount; 
      var button = "<button class='redirect-button' data-url='LINK'>Click Here</button>"; 
      $("#tableid").append("<tbody><tr><td>"+section+"</td><td>"+no+"</td><td>"+price+"</td><td>"+button+"</td></tr></tbody>"); 
      $("#tableid").find(".redirect-button").click(function(){ 
       location.href = $(this).attr("data-url"); 
      }); 
     } 
    }, 
    error  : function(error){ 
     console.log(error); 
    } 
}); 

现在，这里是我认为是对的js文件进行排序的代码在表格中，问题是我不知道该把它放在哪里。

var sortTable = function(){ 
    $("#tableid tbody tr").detach().sort(function(a,b){ 
    //substring was added to omit currency sign, you can remove it if data-price attribute does not contain it. 
     return parseFloat($(a).data('price').substring(1))- parseFloat($(b).data('price').substring(1)); 
    }) 
    .appendTo('#tableid tbody'); 
}; 

而且

for(var i=0; i<json.results.length; i++) { 
    .... 
} 
sortTable(); 

我会用的tablesorter jQuery插件，但我宁可不要。

Answer 1

既然你拉两个Ajax请求数据，也许这将是更好地存储在一个全局数组两个结果，你可以排序和循环通过建立自己的表中价格秩序。

var resultsArray = new Array(); 
for (var i = 0; i < json.results.length; i++) { 
    resultsArray.push(json.results[i]); 
} 
resultsArray.sort(function(a,b) { 
    return a.price - b.price; 
}); 
for (var i = 0; i < json.results.length; i++) { 
    //print your table here 
    var price = resultsArray[i].price; 
    //etc... 
} 

我充分证明了这一点在fiddle

Answer 2

是否有可能让你把两个json响应，按价格排序，然后将它们添加到dom中？这样，您不必仅仅为了分类数据而访问dom？

如果您使用的是jQuery，这将会是这样的。基本上，一旦你的两个Ajax请求解决了，你可以对你的数据做任何事情。在这里你可以合并它们，对它们进行排序，然后运行你的作品来填充表格。

var urlDatas = []; 
$.when(
    $.getJSON(someUrl, function(data) { 
     urlDatas.push(data); 
    }), 
    $.getJSON(someOtherUrl, function(data) { 
     urlDatas.push(data); 
    }) 
).then(function() { 
    //not completely sure if extend returns a value or just mutates, target. 
    finalData = $.extend(true, {}, urlDatas[0], urlDatas[1]); 

    //run a sort on that data 
    sortData(finalData); 

    //add it to your dom 
    insertData(finalData); 
});