DataTable Custom Sorting

by MD Robin Islam

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() {
  $('#myTable').DataTable({
    "columnDefs": [{
      "type": "string",
      "targets": 0
    }],
    "paging": false
  });
});