How to sort datatable?

Question

I need to sort the below datatable by "Contacts with the remaining" column, but only for the number before the brakets.

Here is my code:

var oTable = $('#customers-list').dataTable({});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<table id="customers-list" class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Total
        <br>contacts</th>
      <th>Contacts with
        <br>the remaining</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test1</td>
      <td class="text-center">11</td>
      <td class="text-center">7 (63.64%)</td>
    </tr>
    <tr>
      <td>Test2</td>
      <td class="text-center">25</td>
      <td class="text-center">14 (56%)</td>
    </tr>
    <tr>
      <td>Test3</td>
      <td class="text-center">24</td>
      <td class="text-center">24 (100%)</td>
    </tr>
    <tr>
      <td>Test4</td>
      <td class="text-center">24</td>
      <td class="text-center">3 (12.5%)</td>
    </tr>
    <tr>
      <td>Test5</td>
      <td class="text-center">24</td>
      <td class="text-center">20 (83.33%)</td>
    </tr>
    <tr>
      <td>Test6</td>
      <td class="text-center">24</td>
      <td class="text-center">24 (100%)</td>
    </tr>
    <tr>
      <td>Test7</td>
      <td class="text-center">24</td>
      <td class="text-center">22 (91.67%)</td>
    </tr>
    <tr>
      <td>Test8</td>
      <td class="text-center">24</td>
      <td class="text-center">22 (91.67%)</td>
    </tr>
    <tr>
      <td>Test9</td>
      <td class="text-center">24</td>
      <td class="text-center">24 (100%)</td>
    </tr>
    <tr>
      <td>Test10</td>
      <td class="text-center">24</td>
      <td class="text-center">24 (100%)</td>
    </tr>
    <tr>
      <td>Test11</td>
      <td class="text-center">24</td>
      <td class="text-center">24 (100%)</td>
    </tr>
    <tr>
      <td>Test12</td>
      <td class="text-center">0</td>
      <td class="text-center">0 (0%)</td>
    </tr>
    <tr>
      <td>Test13</td>
      <td class="text-center">24</td>
      <td class="text-center">24 (100%)</td>
    </tr>
  </tbody>
</table>

Answer 1

I found solution:

var oTable = $('#customers-list').dataTable({
     {
         'sType': 'num-html',
         'aTargets': [2]
     }
 });

 $.extend($.fn.dataTableExt.oSort, {
     "num-html-pre": function(a) {
         var x = String(a).replace(/<[\s\S]*?>/g, "");
         return parseFloat(x);
     },

     "num-html-asc": function(a, b) {
         return ((a < b) ? -1 : ((a > b) ? 1 : 0));
     },

     "num-html-desc": function(a, b) {
         return ((a < b) ? 1 : ((a > b) ? -1 : 0));
     }
 });

Answer 2

see this DataTable Example.

You need to add ordering characteristics at the time of table initialization. JSFiddle

$('#example').DataTable( {
        "order": [[ 3, "desc" ]]
} );

Answer 3

data-order and data-sort can do this

you can do like this
 <td class="text-center" data-order="14">14 (56%)</td>

for more

https://datatables.net/examples/advanced_init/html5-data-attributes.html