sort table by pricing.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have data in a table coming from multiple json api links.

my code currently is

<script src="js/1.js"></script>
<script src="js/2.js"></script>
<script>results.sort(function(a,b) { return parseFloat(a.price) - parseFloat(b.price) } );</script>

The issue as it stands looks like this http://tinypic.com/view.php?pic=qmygbb&s=8#.VNkg0SusX7x

I'm wanting ideally the price field to be sorted. below is the inside of the JS files

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);

     }

           });

and here is the 2nd js file

       $.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);

     }

            });
awarded to lukbl

Crowdsource coding tasks.

1 Solution

Winning solution

Hi,

Sorting funciton:

var sortTable = function(){   
  $("#tableid tbody tr").detach().sort(function(a,b){ 
 var dataA = $(a).find("td:eq(2)").text().trim();
                    var dataB = $(b).find("td:eq(2)").text().trim();
                    return parseFloat(dataA.substring(1))- parseFloat(dataB.substring(1));
                }) 
         .appendTo('#tableid tbody'); 
   }; 

adding data to table(I have changed it a bit, you were adding tbody for each row also please note added data-price attribute):

$("#tableid tbody").append("<tr data-price='"+price+"'><td>"+section+"</td><td>"+no+"</td><td>"+price+"</td><td>"+button+"</td></tr>"); 

invoke sorter after loading data in each script file.

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

There is a jquery plugin for table sorting: https://github.com/christianbach/tablesorter you may want to give it a try.

EDIT:

full solution:

//first define a function
var sortTable = function(){   
  $("#tableid tbody tr").detach().sort(function(a,b){ 
 var dataA = $(a).find("td:eq(2)").text().trim();
                    var dataB = $(b).find("td:eq(2)").text().trim();
                    return parseFloat(dataA.substring(1))- parseFloat(dataB.substring(1));
                }) 
         .appendTo('#tableid tbody'); 
   }; 
//include two files where rows are loaded
    //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 tbody").append("<tr  ><td>" + section + "</td><td>" + no + "</td><td>" + price + "</td><td>" + button + "</td></tr>");
                $("#tableid").find(".redirect-button").click(function () {
                    location.href = $(this).attr("data-url");
                });
            }
            sortTable();
        },
        error: function (error) {
            console.log(error);
        }
    });
    //and here is the 2nd js file
    $.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 tbody").append("<tr  ><td>" + section + "</td><td>" + no + "</td><td>" + price + "</td><td>" + button + "</td></tr>");
                $("#tableid").find(".redirect-button").click(function () {
                    location.href = $(this).attr("data-url");
                });
            }
            sortTable();
        },
        error: function (error) {
            console.log(error);
        }
    });
Hi there, i believe this isn't going to work as there are multiple js files, with your code it will only sort one correct? I believe I'm needing a solution that allows multiple links in the same Ajax file Sam
samnymr almost 4 years ago
If you invoke sorting after loading data in each script file it will sort rows which are currently in table. So when script 1 loads data to table this data is sorted and when script 2 adds additional rows whole table will be sorted again giving correct order.
lukbl almost 4 years ago
Hi there, okay. so im quite new to this. i'm not sure i understand where to place what, Sam
samnymr almost 4 years ago
Hi there, So i have copyied the code straight into my code, and it didnt work. No console errors. Ideas? The json links are still working invididually, And on line 23 you have backticks (`) in which cause an error
samnymr almost 4 years ago
When i replace the $(tableid) which you replaced with my code, i get cannot read property 'substring' of undefined, if that helps (i will be uping this bounty once solved)
samnymr almost 4 years ago
Backticks were not left intentionally, please remove them if you find any. I have modified this solution again, I have removed data attribute and use text value from third cell in a row. One more thing: you are attaching event for each button on every cycle of a loop. You could set it up once and remove hanlders assingment from both files. I mean something like: $("#tableid").on("click" ,".redirect-button", function () { location.href = $(this).attr("data-url"); });
lukbl almost 4 years ago