Как я могу заказать по подстроке значения ячейки?

Question

Я использую jQuery Datatables на одной из моих таблиц для легкой фильтрации, поиска и сортировки. Тем не менее, я хотел бы упорядочить свои строки при загрузке страницы на основе фамилии. Сложность в том, что ячейка, которая содержит фамилию, содержит полное имя.

HTML

<table id="Test-Table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John Doe</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>29</td>
    </tr>
    <tr>
      <td>Greg Maddux</td>
      <td>51</td>
    </tr>
    <tr>
      <td>David Goggins</td>
      <td>45</td>
    </tr>
    <tr>
      <td>Walter Bond</td>
      <td>60</td>
    </tr>
  </tbody>
</table>

---

JQuery

$(document).ready(function(){
    $("#Test-Table").DataTable();
});

Вот моя Скрипка .

Полагаю, я бы как-то разделил имя, а затем упорядочил по фамилии, а затем по имени, если бы два человека имели одинаковую фамилию?

Любая помощь в достижении этой цели будет принята с благодарностью.

Answer 1

Вы можете использовать атрибут data-order/data-sort ...

$(document).ready(function(){
    $("#Test-Table").DataTable();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet"/>
<table id="Test-Table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-order="Doe John">John Doe</td>
      <td>20</td>
    </tr>
    <tr>
      <td data-order="Doe Jane">Jane Doe</td>
      <td>29</td>
    </tr>
    <tr>
      <td data-order="Maddux Greg">Greg Maddux</td>
      <td>51</td>
    </tr>
    <tr>
      <td data-order="Goggins David">David Goggins</td>
      <td>45</td>
    </tr>
    <tr>
      <td data-order="Bond Walter">Walter Bond</td>
      <td>60</td>
    </tr>
  </tbody>
</table>