数据表 - 按图像的替代字符串对列进行排序

Question

我有三个标题的表。第二列由图像组成。我想使用它们的alt字符串实现对这些图像的排序。我正在使用 DataTables 来帮助排序。我已经阅读了文档，但在实现排序时仍然面临问题。这是我到目前为止

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.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdn.datatables.net/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.com/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.com/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.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg" width=40px alt="image3" /></td>
        <td>San Francisco</td>
      </tr>
    </tbody>
  </table>
</div>

我有可以使用alt字符串对图像进行排序的功能，但我无法使其工作。我对 javascript 很陌生，我不知道如何在这里进行。我四处搜索，发现我们可以使用columns和columnDefs属性来做到这一点，但还没有到任何地方。任何帮助/指示都会很棒。提前致谢。

编辑

更新了脚本。

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

编辑 - 2

编辑代码以反映 David 的建议。

<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>

Answer 1

如果从 DOM 加载数据表，则可以简单地使用HTML5 data-... 属性，如果使用ajax 加载，则可以使用正交数据。

这是一个例子

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/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.com/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.com/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.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg" width=40px alt="image3" /></td>
    <td>San Francisco</td>
  </tr>
</tbody>
</table>