DataTable Custom Sorting

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<p>Expected Order: 1.1, 1.2, 1.3, 1.10, 1.11, 1.12, 1.17, 1.20, 1.21, 1.31, 2, 2.1, 2.2, 2.4, 2.5, 2.20, 2.31</p>
<table id="myTable" class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>1.2</td>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>1.3</td>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>1.10</td>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>1.11</td>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>1.12</td>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>1.17</td>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>2.2</td>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>1.21</td>
      <td>Mary</td>
      <td>Moe</td>
     ...

JavaScript

$(document).ready(function() {

	jQuery.extend(jQuery.fn.dataTableExt.oSort, {
		'chapter-pre': function(a) {
			var i, item;
			var m = a.split('.'),
				x = '',
				xa = '';

			for (i = 0; i < 3; i++) {
				if (i < m.length) {
					item = m[i];

					if (item.length == 1) {
						x += '000' + item;
					} else if (item.length == 2) {
						x += '00' + item;
                    } else if (item.length == 3) {
						x += '0' + item;
					} else {
						x += item;
					}
				} else {
					x += '000';
				}
			}

			return x;
		},

		'chapter-asc': function(a, b) {
			return a < b ? -1 : a > b ? 1 : 0;
		},

		'chapter-desc': function(a, b) {
			return a < b ? 1 : a > b ? -1 : 0;
		}
	});
  $('#myTable').DataTable({
    "columnDefs": [{
      "type": "chapter",
      "targets": 0
    }],
    "paging": false
  });
});