Сортировка таблицы по значению столбца перед отображением jquery/js

Question

Мне было интересно, можно ли сортировать содержимое финальной таблицы, прежде чем вставлять ее в html, по значению столбца оплаты. Код формирования таблицы следующая

function populateJobMarket() { 
    var tableContent = ''; 
    $.getJSON('modalRoutes/jobmarket', function(data){ 
    $.each(data, function() { 
     var cName = this.companyName; 
     $.each(this.hiring, function(){ 
     tableContent += '<tr class=\'target_row\'>'; 
     tableContent += '<td>' + cName + '</td>'; 
     tableContent += '<td>' + this.paying + '</td>'; 
     tableContent += '<td> <button type=\'button\' class=\'btn btn-warning job_apply\' id=' + this._id + '> Apply </button></td>'; 
     tableContent += '</tr>'; 
     }); 
    }); 
    $('#jobMarket_pp #joblist table tbody').html(tableContent); // Sort it before this step 
    }); 

} 

HTML код:

<div class="modal fade" id="jobMarket_pp" tabindex="-1" role="dialog" aria-labelledby="jobMarket_pp"> 
       <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
           <span aria-hidden="true">&times;</span> 
          </button> 
         <h4 class="modal-title" id="jobMarket_content" Job Offers</h4> </div> <div class="modal-body"> <div class='jobMarketAlert'></div> 
         <div id="joblist"> 
          <table> 
           <thead> 
            <th>Company Name</th> 
            <th>Salary</th> 
            <th>Work</th> 
           </thead> 
           <tbody></tbody> 
          </table> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

Вам сначала нужно выравнивать данные:

var new_data = []; 

$.each(data, function() { 
    var companyName = this.companyName; 
    $(this.hiring).each(function(index, hire){ 
    hire.companyName = companyName; 
    new_data.push(hire); 
    }); 
}); 

Затем сортировать новые сглаженные данные от уплаты :

new_data.sort(function(a, b) { 
    return a.paying < b.paying; 
}); 

Теперь итерация по данным:

$.each($(new_data), function(){ 
    tableContent += '<tr class=\'target_row\'>'; 
    tableContent += '<td>' + this.companyName + '</td>'; 
    tableContent += '<td>' + this.paying + '</td>'; 
    tableContent += '<td> <button type=\'button\' class=\'btn btn-warning job_apply\' id=' + this._id + '> Apply </button></td>'; 
    tableContent += '</tr>' 
}); 

Я также рекомендую использовать вместо:

$(new_data).each(function(hire)) { 
    tableContent += '<tr class=\'target_row\'>'; 
    tableContent += '<td>' + hire.companyName + '</td>'; 
    tableContent += '<td>' + hire.paying + '</td>'; 
    tableContent += '<td> <button type=\'button\' class=\'btn btn-warning job_apply\' id=' + hire._id + '> Apply </button></td>'; 
    tableContent += '</tr>' 
}); 

Использование this является JavaScript часто приводит к головной боли, так как она не ведет себя как this на других языках.