1

I am using jQuery Datatables on one of my tables for easy filtering, searching, and sorting. However, I would like to order my rows on page load based on the last name. The tricky part is, is that the cell that contains the last name, contains the full name.

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();
});

Here is my Fiddle.

I assume I would split the name somehow and then order by the last name, and then the first name if two people were to have the same last name?

Any help on how to accomplish this would be greatly appreciated.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Grizzly
  • 5,873
  • 8
  • 56
  • 109
  • Possible dupes: https://stackoverflow.com/questions/32621373/in-datatable-how-to-sort-a-column-by-partial-value, https://stackoverflow.com/questions/10452305/how-to-sort-a-column-base-on-a-substring-of-the-values-in-each-cell-with-jquery – isherwood Jun 07 '19 at 13:18

1 Answers1

1

You can use the data-order/data-sort attribute...

$(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>
freefaller
  • 19,368
  • 7
  • 57
  • 87
  • Gotcha. I can do this, however this was just an example table. The real table... the body of the table is produced from a `foreach` loop.. so I would have to put the last name before the first name using C# because my view is using razor.. so how would I use c# to put the last name in front of the first? I assume using `.split`? – Grizzly Jun 07 '19 at 13:14
  • I presume therefore that the full name is stored as a single variable? In which case, firstly that sounds like bad design in itself... however, yes, you'd need to split it somehow. I know nothing about razor, so don't know if that provides any functionality... otherwise I'd consider writing a protected function that took the name and return the sortable name, that way you can split and check there are at least 2 parts, etc – freefaller Jun 07 '19 at 13:18
  • This requires manual insertion of reversed name values, right? There are better ways. – isherwood Jun 07 '19 at 13:20
  • @isherwood - please, be my guest and submit a different answer – freefaller Jun 07 '19 at 13:21
  • I posted two in a comment above. – isherwood Jun 07 '19 at 13:21
  • You can use the orthogonal data ( https://datatables.net/manual/data/orthogonal-data ) in datatables in many ways the html 5 data attributes are just one way of using them. You could use the render() method on the column setup to reverse the string from the original data if using an ajax/server side method or pass as a separate key. – Chris Hopkins Jun 10 '19 at 13:29