title: How to sort datatable?
body: <p>I need to sort the below datatable by "Contacts with the remaining" column, but only for the number before the brakets.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var oTable = $('#customers-list').dataTable({});</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;table id="customers-list" class="table table-striped table-bordered table-hover"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Total
          &lt;br&gt;contacts&lt;/th&gt;
        &lt;th&gt;Contacts with
          &lt;br&gt;the remaining&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Test1&lt;/td&gt;
        &lt;td class="text-center"&gt;11&lt;/td&gt;
        &lt;td class="text-center"&gt;7 (63.64%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test2&lt;/td&gt;
        &lt;td class="text-center"&gt;25&lt;/td&gt;
        &lt;td class="text-center"&gt;14 (56%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test3&lt;/td&gt;
        &lt;td class="text-center"&gt;24&lt;/td&gt;
        &lt;td class="text-center"&gt;24 (100%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test4&lt;/td&gt;
        &lt;td class="text-center"&gt;24&lt;/td&gt;
        &lt;td class="text-center"&gt;3 (12.5%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test5&lt;/td&gt;
        &lt;td class="text-center"&gt;24&lt;/td&gt;
        &lt;td class="text-center"&gt;20 (83.33%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test6&lt;/td&gt;
        &lt;td class="text-center"&gt;24&lt;/td&gt;
        &lt;td class="text-center"&gt;24 (100%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test7&lt;/td&gt;
        &lt;td class="text-center"&gt;24&lt;/td&gt;
        &lt;td class="text-center"&gt;22 (91.67%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test8&lt;/td&gt;
        &lt;td class="text-center"&gt;24&lt;/td&gt;
        &lt;td class="text-center"&gt;22 (91.67%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test9&lt;/td&gt;
        &lt;td class="text-center"&gt;24&lt;/td&gt;
        &lt;td class="text-center"&gt;24 (100%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test10&lt;/td&gt;
        &lt;td class="text-center"&gt;24&lt;/td&gt;
        &lt;td class="text-center"&gt;24 (100%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test11&lt;/td&gt;
        &lt;td class="text-center"&gt;24&lt;/td&gt;
        &lt;td class="text-center"&gt;24 (100%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test12&lt;/td&gt;
        &lt;td class="text-center"&gt;0&lt;/td&gt;
        &lt;td class="text-center"&gt;0 (0%)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Test13&lt;/td&gt;
        &lt;td class="text-center"&gt;24&lt;/td&gt;
        &lt;td class="text-center"&gt;24 (100%)&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>