title: Bootstrap Datatables Sorting by part of cell contents
body: <p>I am having trouble sorting my Datatable. I have a column that shows players in a server like this "0 / 50", when I try to sort that column it doesn't sort the numbers properly. It will show in order like this:</p>
  
  <ul>
  <li>0 / 50</li>
  <li>10 / 30</li>
  <li>2 / 40</li>
  <li>3 / 30</li>
  <li>4 / 30</li>
  <li>9 / 25</li>
  </ul>
  
  <p>I would like to sort by only the first number. For example:</p>
  
  <ul>
  <li>0 / 50</li>
  <li>2 / 40</li>
  <li>3 / 30</li>
  <li>4 / 30</li>
  <li>9 / 25</li>
  <li>10 / 30</li>
  </ul>
  
  <p>I know this could probably be done by just separating the 2 values in to their own column, but for aesthetic reasons I would like them to be in the same column.</p>
  
  <p>Here is my HTML Layout:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-12"&gt;
          &lt;table id="serverList" class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;ID&lt;/th&gt;
                      &lt;th&gt;Server Infomation&lt;/th&gt;
                      &lt;th&gt;Players&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my Javascript:</p>
  
  <pre><code>$(document).ready(function() {              
              var t = $('#serverList').DataTable();
  
              $.getJSON('../php/queryAll.php', function(data){
                  var server = [];
                  $.each( data, function( key, val ) {
                      $.each( val, function( key2, val2 ) {
                          server.push(val2);
                      });
                      String.prototype.replaceAll = function(str1, str2, ignore){return this.replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\&lt;\&gt;\-\&amp;])/g,"\\$&amp;"),(ignore?"gi":"g")),(typeof(str2)=="string")?str2.replace(/\$/g,"$$$$"):str2);}
                      if(server[14] &gt; 0)
                      {
                          hostName = server[1].replaceAll('[','&lt;span style="color:#');
                          server[1] = hostName.replaceAll(']',';"&gt;');
  
                          t.row.add( [server[0],server[1],server[8] + ' / ' + server[7]]).draw( false );
                      }
                      server = [];
                  });
                  $("#loader").fadeOut(250, function(){
                      $(".row").fadeIn(1000);
                  });
              });
          });
  </code></pre>
  
  <p>Thanks for any help you can provide.</p>