web-dev-qa-db-ja.com

AJAX経由でデータをロードせずにJavaScriptでHTMLテーブルをソート可能にするにはどうすればよいですか？

AJAX経由でデータをロードせずにjavascriptを使用してテーブルをソート可能にするにはどうすればよいですか？より具体的には、私は私に次のことを与える解決策を探しています：

  • プレーンな古いHTMLテーブルで動作します
  • 自然な比較を使用して列を並べ替え可能にします
  • サーバーサイドテクノロジーにとらわれない（テーブルがJSP、PHPなどでレンダリングされているかどうかに関係なく移植可能である必要があります）
  • できれば、JQueryの拡張機能として実装します。これは、すぐに適用したい特定のプロジェクトですでに使用しています。 YUIなどの別のjavascriptフレームワークに関する提案を受け付けていますが、JQueryでNiceをプレイする必要があります。

私が探していないもの：

  • AJAX呼び出しを介してデータを入力する必要があるソリューション。これを、検索結果などの単純な古いHTMLテーブルが多数あるプロジェクトに適用したいと思います。 dサーバー側のコードを書き直さずにすばやくソート可能にしたい。
  • ページング。
  • フィルタリング。
  • 任意の比較ロジックを指定する機能。

現在取り組んでいる特定のプロジェクトのテクノロジースタックは意図的に省略していますが、絶対に必要だと思われる場合は含めます。繰り返しになりますが、私はサーバー上に何も含まないソリューションに最も興味があります。この分野で少しの愛を使うことができるあらゆる種類の言語で書かれたプロジェクトがたくさんあります。

Stack Overflowに関する同様の既存の質問の問題について

私はいくつかの突っ込みをしました、そして私が見つけることができる最も近い質問は これ です。しかし、私の要件は少し違うので、新しい質問をすることにしました。

javascriptjqueryhtmlsortinghtml-table
21
Paul Morie

Jqueryプラグイン tablesorter は非常にうまく機能します。

24
antony.trupe

更新されたリンク（これは https://github.com/SortableJS/Sortable ではないことに注意してください）： sortable を試してください。

4
RedFilter

Tablesorter は、sortable.jsと同様に機能するjQueryプラグインであり、通常のHTMLテーブルを並べ替え可能なテーブルに変換します。

4
Marquis Wang

  1. ダウンロード sorttable.js

  2. 次のように、ページのHEADにリンクを配置して、sorttable.jsを含めます。

    <script src="sorttable.js"></script>

  3. テーブルにsortableのクラスを指定して、テーブルを並べ替え可能なテーブルとしてマークします。

    <table class="sortable">
1
Karan Rajput

OrbManの答えに加えて、 wikibits.js を見ることができます。これは、MediaWikiのソートコードのバージョンです。 AJAXまたは特別なグルーコードは必要ありません。ソート可能なテーブルを指定するための単純なクラス（ソート可能）だけが必要です。

コードは自由にライセンスされており、ウィキメディアサイト全体の本番環境で使用されています。

編集：MediaWikiは Tablesorter のバージョンに切り替えました 86088 （2011年4月）から始まります。

1
Matthew Flaschen

私は本当に好きです tristenのtablesort 。依存関係がなく、軽量で、多くのスタイリングを必要としない/独自のスタイリングを台無しにしないでください！

1
zemirco