【ワードプレス】任意の文字列でソートを可能にしたい。

Question

1ヵ月ほど前からWordPressにてサイトを作成しております。

TablePressというプラグインを用いて表を掲載しているのですが
任意の文字列でソートする方法が分かりません。
（TablePressは既存のシステムで昇順、降順のソートが可能です)

「b101E」「b201E」「c101E」「t101E」
このような半角英数字混合の単語を
希望通りの並び順にしたいです。
【t1<b1<b2<c1】
カタチとしては、このような並び順です。

phpやhtmlをいじれば可能？ということまでは
調べて分かったのですが
どのようにTablePressにソースを取り込めばいいのかが
分かりません。
そもそものソースもよく分かっておりません…

質問ばかりで大変申し訳ないのですが
どなたかご教示いただきたいです。
よろしくお願い致します。

Comments

[nora_kuragen]

確認させてください。TablePressでは1列の中で昇順と降順を混合したソートが可能なのでしょうか。tとbの関係は降順ですがbとcの関係は昇順になりますし、まだtが大文字であれば理解はできるのですが、提示された並び順ではプログラムの方が昇順降順の判断がつかないと思いますが。TablePressでは解決できるのでしたらすみません。

[awata_vvclp]

現状では不可能です。昇順or降順のみしか対応しておりません。それをphpやhtmlで任意にコントロールすることができないかという旨で質問させていただきました。基本abcの並びをこちらの指定でacbにしたいのです。文章が分かりにくく申し訳ありません。

Answer 1

TablePress の公式ページを見たところ、DataTablesを使っているようでしたので、ソートのカスタマイズが可能だと思います。
↓こちらを参考にしてみてください。
Sorting plug-ins

　

コメントを受けて追記

DataTablesのソートをするのは↓のとおり比較的簡単なんですが、
sort()
demoのコードを見るとDataTablesのインスタンスがクロージャの中にあるので外部から触れなさそうです。
TablePressのドキュメントを見ても標準的なカスタマイズでは難しそうなので、PHPのソースから触る必要があるかと思います。

または、ソート用のプラグインを使って、↓のようにオプションのパラメータを設定する方法でもいいかもしれません。

That’s possible by adding the following code to the “Custom Commands” textfield in the “Features of the DataTables JavaScript library” section on the “Edit” screen of the table

DataTables Sorting plugins | TablePress

　

コメントを受けて追記

サンプルコードを挙げます。

['a','b','c'].sort(function(a,b){
  var testString = 'acb';
  return testString.indexOf(a) - testString.indexOf(b);
})

/*
a,c,b
*/

参考：

指定された値が最初に現れたインデックスを返します。

String.prototype.indexOf() - JavaScript | MDN

　

文字列の代わりに数字を比較する場合、比較関数は単純に a から b を引けばよいでしょう。

Array.prototype.sort() - JavaScript | MDN

Comments

[awata_vvclp]

お返事遅くなってしまい申し訳ありません。
とても参考になるページをご紹介いただきまして
誠に感謝申し上げます。

こちらのページを参考に色々試してみたのですが
希望通りのソートは実現できませんでした。
貴重な情報源だったのですが
プラグインのphpをいじってみても、
ソースを元に編集しても、
自分には難しかったようで…

この際、TablePressにこだわることはせず
色々試して希望通りのソートを実現したいと考えております。

しかし、200以上のページにテーブルを挿入するつもりなので
少しでも軽いものでテーブルを作成したいのです。
この二日間で多くのサイトから情報を得ましたが
あまりイメージが浮かばず…

どのようにすれば
複雑なソートにも対応でき、
多くのテーブルを簡易的に作ることができますでしょうか。

頼るばかりではいけないのですが
どうしてもお聞きしたいです。
自分にはさっぱり理解できないので
どなたかご教示お願い致します。

拙い文章で大変恐縮ですが
皆様のお力を貸していただきたいです。
よろしくお願い致します。

https://tablepress.org/demo/
↑参考までに、こちらが現在使っているプラグイン
「TablePress」のテーブルデモです。
この既存のソート機能に任意の文字列でソートを
対応させたいです。

[Lhankor_Mhy]

回答に追記しました。

[awata_vvclp]

お返事ありがとうございます。
プラグインのインストール等、
お教えいただいた内容を実践致しましたところ
もう一歩の所まで辿り着いたと思われます。
ただ、最後の最後にまたつまずいてしまいました。

以下、プラグインのソースなのですが

tablepress-datatables-sorting-plugins/jquery.datatables.sorting-plugins.js

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
/**
* European dates dd.mm(.yyyy) or dd/mm(/yyyy), will be detected automatically
*/
'date-eu-pre': function ( date ) {
var year = '', // year is optional
month, day,
character = '/';
if ( date.indexOf('.') > 0 ) {
character = '.'; // if found, use . as the separator, otherwise use /
}
date = date.replace( ' ', '' ).split( character );
if ( date[2] ) {
year = date[2];
}
month = date[1];
if ( 1 === month.length ) {
month = '0' + month;
}
day = date[0];
if ( 1 === day.length ) {
day = '0' + day;
}
return ( year + month + day ) * 1;
},
'date-eu-asc': function ( a, b ) {
return a - b;
},
'date-eu-desc': function ( a, b ) {
return b - a;
},

/**
* Formatted numbers, currency and percentage values, will be detected automatically
*/
'formatted-num-pre': function ( a ) {
a = ( '-' === a ) ? 0 : a.replace( /[^\d\-\.]/g, "" );
return parseFloat( a );
},
'formatted-num-asc': function ( a, b ) {
return a - b;
},
'formatted-num-desc': function ( a, b ) {
return b - a;
},

/**
* Numeric Comma (numbers like 0,5), NOT detected automatically!
*/
'numeric-comma-pre': function ( a ) {
a = ( '-' === a ) ? 0 : a.replace( /[^\d\-\,]/g, "" ).replace( /,/, "." );
return parseFloat( a );
},
'numeric-comma-asc': function ( a, b ) {
return a - b;
},
'numeric-comma-desc': function ( a, b ) {
return b - a;
},

/**
* Numbers and text mixed in a column, text is treated as infinity
*/
'numbers+text-pre': function ( a ) {
if ( ! isNaN( parseFloat( a ) ) && isFinite( a ) ) {
return parseFloat(a);
} else {
return Number.MAX_VALUE;
}
},
'numbers+text-asc': function ( a, b ) {
return a - b;
},
'numbers+text-desc': function ( a, b ) {
return b - a;
}
} );

/**
* Type detection for currency and percentage values
*/
jQuery.fn.dataTableExt.aTypes.unshift( function ( data ) {
if ( null !== data && data.match( /^(0[1-9]|[12][0-9]|30|31)[\.\/](0[1-9]|1[012])[\.\/](19|20|21)\d\d$/ ) ) {
return 'date-eu';
}
return null;
} );

/**
* Type detection for currency and percentage values
*/
(function(){
var re = new RegExp( "[^\$£€%0-9\.,' -]" ); // Init the regex just once for speed
jQuery.fn.dataTableExt.aTypes.unshift( function ( data ) {
if ( typeof data !== 'string' || re.test( data ) ) {
return null;
}
return 'formatted-num';
} );
}());

/**
* Type detection for formatted numbers
*/
jQuery.fn.dataTableExt.aTypes.unshift( function ( data ) {
var deformatted = data.replace(/[^\d\-\.\/a-zA-Z]/g,'');
if ( jQuery.isNumeric( deformatted ) || '-' === deformatted ) {
return 'formatted-num';
}
return null;
} );

おそらく、この部分に修正を加えることで
任意の文字列でソートが可能になると思うのですが
インターネットに掲載されているソースを加えても
上手く反映しませんでした。

話を戻しまして、
改めて記載させていただきますと
半角英数字を希望通りの並び順にしたいのです。
それも、やや複雑な文字でして、

昇順
「a１A」「a１B」「a２A」「a２B」「a２C」「a２D」
「ｂ１A」「ｂ１B」
「ｃ１A」「ｃ１B」

このような文字を
最初の一文字は　昇順「a ｃ ｂ」
最後の一文字は　昇順「ｄ ｃ ｂ a」
という順番にしたいです。

説明が上手くできないのですが
少々、複雑な文字列のソートを再現したいです。
このような内容のソート記事はネットを探しても
見つけられませんでした。

このようなソートをソースをいじって再現するには
どうすればいいのでしょうか。
私には力不足でさっぱり分かりませんでした。
最後の一歩まで来ている気がするので
どなたかお力を貸していただきたいです。
よろしくお願い致します。

[Lhankor_Mhy]

サンプルコードを回答に追記しました。さらに不明の部分があればコメントしてください。