DataTablesとは

HTMLの<table>タグでソートや検索機能を追加するための、簡単にテーブルを実現できる jQuery プラグインです。

公式サイト：DataTables | Table plug-in for jQuery

↓↓↓詳しくはこちらもどうぞ↓↓↓

bonoponz.hatenablog.com

実現したいこと

datatablesで記号の列を並び替えできるようにカスタマイズしたい。

留意点

今回のサンプルではこんなことしなくても並び替えできるデータなんですが、プログラムで取得した値などを表示する際にソートが利かないことがあるので、そういった場合にご活用ください。

完成形

HTMLはdatatablesの部分のみ抜粋です。

<table id="exampleTable" class="table hover nowrap">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">name</th>
      <th scope="col">url</th>
      <th scope="col">マーク</th>
    </tr>
  </thead>
</table>

<script>
$(function() {
  const json =[
    {
      "id":1,
      "name":"やふー",
      "url":"https://www.yahoo.co.jp/",
      "mark":"★"
    },{
      "id":2,
      "name":"ぐぐる",
      "url":"https://www.google.com/",
      "mark":"-"
    },{
      "id":3,
      "name":"ようつべ",
      'url': 'https://www.youtube.com/',
      "mark":"★"
    },{
      "id":4,
      "name":"びんぐ",
      'url': 'https://www.bing.com/',
      "mark":"●"
    }
  ];

  $('#exampleTable').DataTable({
    data: json,
    columns: [
      { data: 'id' },
      { data: 'name' },
      { data: 'url' },
      { data: 'mark' },
    ],
    columnDefs : [{ 
        targets: 3,  // 列番号
        orderDataType: 'markSort'
    }],
  });
})

// ソートカスタマイズ
$.fn.dataTable.ext.order['markSort'] = function (settings, col){
  return this.api().column(col, {order:'index'}).nodes().map(function (td, i) {
    if ($(td).text() == "★") {
      return 0
     }else if ($(td).text() == "-") {
      return 1
    } else {
      return 2
    }
    
  });
}
</script>

解説

1. `columnDefs`オプション

columnDefsオプションでカスタマイズしたいソートの列番号を指定して任意の名前をつけます。

columnDefs : [{ 
    targets: 3,
    orderDataType: 'markSort'
}],

2. ソート順を指定

$.fn.dataTable.ext.order['markSort'] = function (settings, col){
  return this.api().column(col, {order:'index'}).nodes().map(function (td, i) {
    if ($(td).text() == "★") {
      return 0
     } else if ($(td).text() == "-") {
      return 1
    } else {
      return 2
    }
  });
}

表示データの裏側で数値を付与します。 $(td).text()で値を取得できるので、それぞれに重さ（数値）を指定することで順序が決まります。

今回は★に「0」、-に「1」、そのほかは「3」とします。

datatablesのコード詳細はこちら：DataTables example - Live DOM ordering