jQueryのDataTablesで画像の列を任意の順にソートしたい

列１	列３	列４
1	テキスト4	あいうえお
2	テキスト1	かきくけこ
3	テキスト3	さしすせそ
4	テキスト2	たちつてと

列１

列２

列３

列４

テキスト4

あいうえお

テキスト1

かきくけこ

テキスト3

さしすせそ

テキスト2

たちつてと

前提・実現したいこと

jQueryのDataTablesのソートについて。

はじめまして。
お知恵を拝借させていただきたく質問させていただきました。

発生している問題・エラーメッセージ

エラーメッセージは特に表示されておりません。

html
1<table id="test">
2	<thead>
3		<tr><th>列１</th><th>列２</th><th>列３</th><th>列４</th></tr>
4	</thead>
5	<tbody>
6		<tr><td>1</td><td><img src="test.jpg"></td><td>テキスト</td><td>あいうえお</td></tr>
7		<tr><td>2</td><td><img src="sample.jpg"></td><td>テキスト</td><td>かきくけこ</td></tr>
8		<tr><td>3</td><td><img src="data.jpg"></td><td>テキスト</td><td>さしすせそ</td></tr>
9		<tr><td>4</td><td><img src="test.jpg"></td><td>テキスト</td><td>たちつてと</td></tr>
10		・
11		・
12		・
13	</tbody>
14</table>

実際は500件ほどの行があり、同じ画像を使っている行もございます。
上記HTMLの通り画像のみの列があるのですが、これを任意の順でソートさせるにはどうしたら良いでしょうか？
画像タグの前にや等としてみたのですが、ソートはされませんでした。
画像のファイル名は番号ではないので、ファイル名でソートというのは避けたいです。

ヒントでも構いません。
どなたか解決方法をご存知の方がみえましたらよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

ドキュメントの以下あたりを参考にすればよいかと思います。

datatables.net: Live DOM ordering

下記はサンプルです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Q220997</title>
6    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
7    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
8    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
9    <script>
10      $.fn.dataTable.ext.order['image-text'] = function (settings, col) {
11        return this.api().column(col, { order: 'index' }).nodes().map(td =>
12            $('img', td).attr('src').split('=')[1]
13        );
14      }
15
16      $(function () {
17        $('#test').DataTable(
18          {
19            columns: [
20              { orderable : true },
21              { orderDataType: 'image-text', type: 'string' },
22              { orderable : true },
23              { orderable : true }
24            ],
25            deferRender : false
26          }
27        );
28      } );
29    </script>
30</head>
31<body>
32
33<table id="test">
34    <thead>
35    <tr><th>列１</th><th>列２</th><th>列３</th><th>列４</th></tr>
36    </thead>
37    <tbody>
38    <tr><td>1</td><td><img src="https://dummyimage.com/100x50/000/fff&text=CCC"></td><td>テキスト4</td><td>あいうえお</td></tr>
39    <tr><td>2</td><td><img src="https://dummyimage.com/100x50/f00/fff&text=DDD"></td><td>テキスト1</td><td>かきくけこ</td></tr>
40    <tr><td>3</td><td><img src="https://dummyimage.com/100x50/00f/fff&text=BBB"></td><td>テキスト3</td><td>さしすせそ</td></tr>
41    <tr><td>4</td><td><img src="https://dummyimage.com/100x50/888/fff&text=AAA"></td><td>テキスト2</td><td>たちつてと</td></tr>
42    </tbody>
43</table>
44
45</body>
46</html>
47