MTS Simple Bookingの有料版 で予約一覧を並び替える方法 ― PHP本体の並び替えと JavaScript 表示ソートの正しい使い分け ―

ここから先は環境依存になります。個別条件が絡む場合は、無理に触らず専門対応を検討してください。

1 並べ替えをしたい

WordPressの予約プラグイン MTS Simple Booking（有料版） を使っていると、管理画面や一覧ページで

• 予約ID順に並べたい
• 予約時間順で見たい
• 列をクリックして並び替えたい

といった要望が出てきます。

この記事では、
「PHPで本体データを並び替える方法」と
「JavaScriptで画面上だけ並び替える方法」の違いと、
それぞれの正しい使い所を解説します。

2 結論：この2つは役割がまったく違う

まず大前提として、PHPの並び替えが「本体」です。
JavaScriptはあくまで「見た目の補助」に過ぎません。

3 ① PHPで予約データを並び替える（本体処理）

MTS Simple Booking（有料版）では、予約一覧を配列として扱っているため、PHPの usort() を使うことで確実に並び替えができます。

3.1 例：予約IDで昇順に並び替える

この方法は、管理画面の表示順だけでなく、CSV出力・帳票・集計結果にも影響するため、JavaScriptでは代替できません。

// ★予約IDで昇順に並べる
usort($filteredBookings, function ($a, $b) {
    return (int)$a['booking_id'] <=> (int)$b['booking_id'];
});

この並び替えは、

• 画面表示
• 印刷
• CSV出力
• JavaScriptが無効な環境

すべてに影響します。

「正しい順序を保証したい場合は、必ずPHP側で並び替える」
これが鉄則です。

4 ② JavaScriptで一覧表をクリック並び替え（表示用）

次に、管理画面などで便利なのが
テーブルの列をクリックして並び替える方法です。

これはデータを書き換えるのではなく、
HTML上の行の順番を入れ替えているだけです。

4.1 テーブルクリックで並び替えるJavaScript

<script>
document.addEventListener('DOMContentLoaded', function () {
    const table = document.querySelector('table.day-meibo');
    if (!table) return;

    const ths = table.querySelectorAll('thead th');
    let sortDirection = {};

    ths.forEach((th, colIndex) => {
        th.style.cursor = 'pointer';
        th.addEventListener('click', function () {
            const tbody = table.querySelector('tbody');
            const rows = Array.from(tbody.querySelectorAll('tr'));

            const getCellValue = (row) =>
                row.children[colIndex]?.textContent.trim() || '';

            sortDirection[colIndex] = !sortDirection[colIndex];

            rows.sort((a, b) => {
                const aVal = getCellValue(a);
                const bVal = getCellValue(b);

                if (aVal < bVal) return sortDirection[colIndex] ? -1 : 1;
                if (aVal > bVal) return sortDirection[colIndex] ? 1 : -1;
                return 0;
            });

            rows.forEach(row => tbody.appendChild(row));

            // 矢印表示
            ths.forEach((header, i) => {
                header.textContent = header.textContent.replace(/[▲▼]/g, '');
                if (i === colIndex) {
                    header.innerHTML += sortDirection[colIndex]
                        ? ' ▲'
                        : ' ▼';
                }
            });
        });
    });
});
</script>

この方法の特徴は、

• PHPに影響しない
• 表示だけが切り替わる
• リロードすると元に戻る

という点です。

5 よくある勘違い

「JavaScriptで並び替えているから、PHPはいらないのでは？」と思われがちですが、それは誤りです。

JavaScriptはあくまで補助であり、

• 検索結果の正当性
• 帳票・印刷
• 不具合時の安全性

これらはPHP側の並び替えがあってこそ成立します。

6 おすすめ構成（実務）

• PHP：基準となる並び順を決める（必須）
• JavaScript：管理画面での操作性向上（任意）

この2つを混同しないことが、
MTS Simple Booking（有料版）を安全にカスタマイズするコツです。

7 まとめ

• 並び替えの本体はPHP
• JavaScriptは表示専用
• 両方を併用すると使いやすくなる

この記事が、MTS Simple Booking のカスタマイズで悩んでいる方の参考になれば幸いです。