JSFiddle - React, Tailwind, and code Playground

Character Names (2)

by MegaScience

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://8e6f14a30165e645047a67c9ff3f3187315fa515.googledrive.com/host/0B3GcDUG6lmlMTzhUZk1NMGRhaWc/jquery.tablesorter.js"></script>
<table id="myTable" class="tablesorter" ng-controller="mainController">
  <thead>
    <tr>
      <th ng-repeat="th in head">{{th}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in body">
      <td>{{row.a}} {{$last ? reset(row.a) : unset(row.a)}}</td>
      <td>{{row.b}}</td>
      <td>{{row.c}}</td>
    </tr>
  </tbody>
</table>

CSS

/* tables */

table.tablesorter {
  font-family: arial;
  background-color: #CDCDCD;
  margin: 10px 0pt 15px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
  table-layout: fixed;
}

table.tablesorter thead tr th,
table.tablesorter tfoot tr th {
  background-color: #e6EEEE;
  border: 1px solid #FFF;
  font-size: 8pt;
  padding: 4px;
}

table.tablesorter thead tr .header {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
}

table.tablesorter tbody td {
  color: #3D3D3D;
  padding: 4px;
  background-color: #FFF;
  vertical-align: top;
}

table.tablesorter tbody tr.odd td,
table.tablesorter tbody tr:nth-child(odd) td {
  background-color: #F0F0F6;
}

table.tablesorter thead tr .headerSortUp {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

table.tablesorter thead tr .headerSortDown {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}

table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .headerSortUp {
  background-color: #8dbdd8;
}

JavaScript

// http://tablesorter.com/docs/
var currentWorlds = ["Scania", "Bera", "Broa", "Windia", "Khaini", "Bellocan", "Mardia", "Kradia", "Yellonde", "Demethos", "Galicia", "El Nido", "Zenith", "Arcania", "Chaos", "Nova", "Renegades", "Reboot"],
  currentWorldsL = currentWorlds.length,
  searchRegExp = new RegExp('^(' + currentWorlds.join('|').toLowerCase() + ') ([0-9]{1,2})$');

var theModule = angular.module('generateTableApp', []).controller('mainController', ['$scope', mainController]);

$(document).ready(function() {
  initializer();
});

function initializer() {
  $.tablesorter.addParser({
    id: 'worlds',
    is: function(s) {
      return searchRegExp.test(s.trim().toLowerCase());
    },
    format: function(s) {
      var a = searchRegExp.exec(s.trim().toLowerCase()),
        r = "";
      if (a === null) console.log(s);
      for (var i = 0; i < currentWorldsL; i++) {
        if (a[1] == currentWorlds[i].toLowerCase()) {
          r += i;
          break;
        }
      }
      r += (a[2].length == 1 ? "0" : "") + a[2];
      return $.tablesorter.formatFloat(r);
    },
    type: 'numeric'
  });
  $("#myTable").tablesorter({
    sortList: [
      [0, 0]
    ]
  });
}

function mainController($scope) {
  $scope.playerCount = {
    "Scania": 0,
    "Bera": 0,
    "Broa": 0,
    "Windia": 0,
    "Khaini": 0,
    "Bellocan": 0,
    "Mardia": 0,
    "Kradia": 0,
    "Yellonde": 0,
    "Demethos": 0,
    "Galicia": 0,
    "El Nido": 0,
    "Zenith": 0,
    "Arcania": 0,
    "Chaos": 0,
    "Nova": 0,
    "Renegades": 0,
    "Reboot": 0
  };
  $scope.origPlayerCount = angular.copy($scope.playerCount);
  $scope.reset = function(world) {
  	var final = $scope.playerCount[world] + 1;
  	$scope.playerCount = angular.copy($scope.origPlayerCount);
    return final;
  };
  $scope.unset = function(world) {
    return ++$scope.playerCount[world];
  };
  $scope.head = {
    a: "Server/Slot",
    b: "Username",
    c: "Reference"
  };
  $scope.body = [{
    a: "Renegades",
   ...