<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-6"> <table class="table table-bordered"> <thead class="alert-info"> <tr> </tr> </thead> </table> </div> </div> </body> </html>
var members = [ {"firstname":"John", "lastname":"Smith", "gender":"Male"}, {"firstname":"Claire", "lastname":"Temple", "gender":"Female"}, {"firstname":"Steve", "lastname":"Roger", "gender":"Male"}, {"firstname":"Paul", "lastname":"Miles", "gender":"Male"}, ]; displayData(); function displayData(){ var data = ""; if(members.length > 0){ for(var i=0; i < members.length; i++){ data += "<tr>"; data += "<td>"+members[i].firstname +"</td>"; data += "<td>"+members[i].lastname+"</td>"; data += "<td>"+members[i].gender+"</td>"; data += "</tr>"; } } document.getElementById('result').innerHTML = data; } function sortAscending(){ if(members.length > 0){ var sortArray = members; sortArray.sort(function(a,b){ if(a.lastname < b.lastname){ return -1; } if(a.lastname > b.lastname){ return 1; } return 0; }); displayData(); } } function sortDescending(){ if(members.length > 0){ var sortArray = members; sortArray.sort(function(a,b){ if(a.lastname > b.lastname){ return -1; } else if(a.lastname < b.lastname){ return 1; }else{ return 0; } }); displayData(); } }