修改

Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我有可以使用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

编辑代码以反映大卫的建议。

<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加载DataTables，则可以使用HTML5 data-... attributes;如果使用ajax加载，则可以使用orthogonal data。

这是一个例子

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

Answer 2

博格丹的好答案！如果您想提供搜索功能以及排序功能，则只想添加它，就应该使用'data-search'属性，如下所示：

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

这可让您在要用于搜索/排序的表格中隐藏更多详细信息。

DataTables - 按图像的alt字符串排序

修改

2 个答案: