Planetside Online Players

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
(function($) {
var ViewModel = function(options) {
var self = this;
this.options = options;
this.url = 'http://census.daybreakgames.com/get/ps2:v2/outfit_member?c:limit=1000&c:resolve=online_status,character(name,battle_rank,profile_id)&c:join=type:profile^list:0^inject_at:profile^show:name.en^on:character.profile_id^to:profile_id&outfit_id='+this.options.outfit_tag;
this.Members = ko.observableArray([]);
this.HideOffline = ko.observable(true);
this.IsLoading = ko.observable(false);
this.MembersSorted = ko.computed(function(){
var result = ko.utils.arrayFilter(self.Members(), function(item){
return self.HideOffline() ? item.online_status > 0 : true;
}).sort(function(l,r){ return l.character.name.first == r.character.name.first ? 0 : (l.character.name.first > r.character.name.first ? 1 : -1 )});
return result;
});
this.start = function() {
self.refresh();
}
this.refresh = function() {
self.IsLoading(true);
$.ajax({
dataType: "jsonp",
url: this.url
}).done(function ( data ) {
self.Members(data.outfit_member_list);
self.IsLoading(false);
});
}
};
$(function(){

//CHANGE THIS TO MATCH YOUR OUTFIT ID	
var options = { outfit_tag: '37509488620628689' };

var viewmodel = new ViewModel(options);
ko.applyBindings(viewmodel, $('#memberlist')[0]);
viewmodel.start();
});
})(jQuery);

</script> 
<div id="memberlist" style="padding: 10px;position:relative;"> 
  <table width="100%" style="width:100%;"> 
    <tbody>
      <tr style="font-weight:bold; height: 24px;"> 
        <td style="background-position: top left; padding-left: 10px;"> Player </td> 
        <td style="background-position: top center; width: 30px;"> BR </td> 
        <td style="background-position: top right;"> Playing </td> 
      </tr> 
    </tbody>
    <tbody data-bind="foreach: MembersSorted"> 
      <tr> 
        <td style="padding-left: 10px; max-width: 125px; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;">
			<span data-bind="text: character.name.first"></span>
		</td> 
        <td>
			<span data-bind="text: character.battle_rank.value"></span>
		</td> 
        <td>
			<span data-bind="text: character.profile.name.en"></span>
		</td> 
      </tr> 
    </tbody> 
  </table>
  <hr></hr>
  <div>
    <div style="float:right; padding-right:20px">
      <span href="#" data-bind="visible: IsLoading">loading...</span>
    </div>
    <div style="float:left; padding-left:10px">
      <a href="#" data-bind="click: refresh" style="color:#FFFFFF">refresh</a>
    </div>
  </div>
 </div>