I have table with three headers. The second column consists of images. I want to implement sorting of this images using their alt string. I am using DataTables to help with the sorting. I have been through the documentation but still facing issues in implementing the sort. This is what I have so far

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
  "alt-string-pre": function(a) {
    return a.match(/alt="(.*?)"/)[1].toLowerCase();
  },
  "alt-string-asc": function(a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "alt-string-desc": function(a, b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});

$(document).ready(function() {
  var table = $('#example').DataTable();
});

<link href="//datatables/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src=".9.1.min.js"></script>
<script src=".10.15/js/jquery.dataTables.min.js"></script>
<div class="container">
  <table id="example" class="example" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Image</th>
        <th>Office</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td><img src=".jpg" width=40px alt="image1" /></td>
        <td>Edinburgh</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td><img src=".png" width=40px alt="image2" /></td>
        <td>Edinburgh</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td><img src=".svg" width=40px alt="image3" /></td>
        <td>San Francisco</td>
      </tr>
    </tbody>
  </table>
</div>

I have table with three headers. The second column consists of images. I want to implement sorting of this images using their alt string. I am using DataTables to help with the sorting. I have been through the documentation but still facing issues in implementing the sort. This is what I have so far

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
  "alt-string-pre": function(a) {
    return a.match(/alt="(.*?)"/)[1].toLowerCase();
  },
  "alt-string-asc": function(a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "alt-string-desc": function(a, b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});

$(document).ready(function() {
  var table = $('#example').DataTable();
});

<link href="//datatables/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery./jquery-1.9.1.min.js"></script>
<script src="https://cdn.datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<div class="container">
  <table id="example" class="example" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Image</th>
        <th>Office</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td><img src="https://image.flaticon./teams/new/1-freepik.jpg" width=40px alt="image1" /></td>
        <td>Edinburgh</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td><img src="http://icons.iconarchive./icons/paomedia/small-n-flat/1024/sign-check-icon.png" width=40px alt="image2" /></td>
        <td>Edinburgh</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td><img src="http://static4.wikia.nocookie/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg" width=40px alt="image3" /></td>
        <td>San Francisco</td>
      </tr>
    </tbody>
  </table>
</div>

I have the function that can sort images using their alt string, but I have not been able to make it work. I am pretty new to javascript and I am not sure how to proceed here. I searched around and found we can do this using columns and columnDefs properties but haven't gotten anywhere yet. Any help/directions would be great to have. Thanks in advance.

Edit

Updated the script.

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
  "alt-string-pre": function(a) {
    return a.match(/alt="(.*?)"/)[1].toLowerCase();
  },
  "alt-string-asc": function(a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "alt-string-desc": function(a, b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});

$('#example').dataTable({
  columnDefs: [{
    type: 'alt-string',
    targets: 2
  }]
});

$(document).ready(function() {
  var table = $('#example').DataTable();
});

EDIT - 2

Edited the code to reflect David's suggestions.

<script>
    jQuery.extend( jQuery.fn.dataTableExt.oSort, {
        "alt-string-pre": function ( a ) {
            return a.match(/alt="(.*?)"/)[1].toLowerCase();
        },

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

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

    $(document).ready( function () {
          $('#example').DataTable({
           columnDefs: [
           { type: 'alt-string', targets: 1 },]
          });
    });

</script>

• javascript
• jquery
• html
• datatables

• 1 There is help and example in the documentation -> datatables/plug-ins/sorting/alt-string – davidkonrad Commented Apr 27, 2017 at 14:11
• I came across that. Thats where I got the function from. But adding the code to the script doesn't do anything. I have added an edit. Please cehck – Clock Slave Commented Apr 27, 2017 at 14:16
• 1 If you scroll down you will see an EXAMPLE – davidkonrad Commented Apr 27, 2017 at 14:23
• @davidkonrad Um actually, thats what I added to the code in the edit. Still couldn't make it work Any clue? – Clock Slave Commented Apr 27, 2017 at 14:43
• 1 Yes, do not initialize the table twice :) targets is zerobased so you should probably use targets: 1 ... – davidkonrad Commented Apr 27, 2017 at 14:49

2 Answers 2

You can simply use HTML5 data-... attributes if you load DataTables from DOM or you can use orthogonal data if you load it with ajax.

Here's an example

$(document).ready(function() {
  var dt = $('#example').DataTable({});
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="example" width="100%">
<thead>
  <tr>
    <th>Name</th>
    <th>Image</th>
    <th>Office</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Tiger Nixon</td>
    <td data-sort="image1"><img src="https://image.flaticon./teams/new/1-freepik.jpg" width=40px alt="image1" /></td>
    <td>Edinburgh</td>
  </tr>
  <tr>
    <td>Garrett Winters</td>
    <td data-sort="image2"><img src="http://icons.iconarchive./icons/paomedia/small-n-flat/1024/sign-check-icon.png" width=40px alt="image2" /></td>
    <td>Edinburgh</td>
  </tr>
  <tr>
    <td>Ashton Cox</td>
    <td data-sort="image3"><img src="http://static4.wikia.nocookie/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg" width=40px alt="image3" /></td>
    <td>San Francisco</td>
  </tr>
</tbody>
</table>

Great answer by Bogdan! Just wanted to add if you'd like to provide search capability as well as sorting, you should use the 'data-search' property with the as follows:

<td data-search="Tiger Nixon">T. Nixon</td>

This allows you to hide more detailed information within the table that you'd like to use for searching/sorting.