3

ユーザーが列ヘッダーを使用してクライアント側で並べ替えることができるhtmlテーブルを作成するにはどうすればよいですか？すべての行のhtmlデータをJavascript配列にロードし、domを使用してテーブルをコンテンツdivに追加できますが、それは正しい方法ですか？主要なメソッドをリストすると、そこから自分の道を見つけることができるので、コードを要求していません。

4

5 に答える 5

3

http://tinysort.sjeiti.com/は便利なはずです

于 2012-09-07T12:42:08.567 に答える
3

すでに JS フレームワークを利用している場合は、車輪を再発明する必要はありませんが、いくつかの優れたソリューションを次に示します。

テーブルソート- http://www.frequency-decoder.com/demo/table-sort-revisited/

JQuery テーブルソーター- http://tablesorter.com/docs/#Demo

GridView3 - http://dev.sencha.com/playpen/ext-2.0/examples/grid/grid3.html

Stuart Langridge のスクリプト - http://yoast.com/articles/sortable-table/

Mootools Mootable - http://joomlicious.com/mootable/

于 2012-09-07T12:43:56.403 に答える
2

tablesorterは優れていますが、フィルタリングが組み込まれていて、かなり広く使用され、サポートされているものが必要です。http：//datatables.net/を試してください。

于 2012-09-07T12:40:50.573 に答える
2

すべてのテーブルソーターは次のように機能します。

  1. table.tbody.rowsを配列で取得する
  2. カスタム比較関数を使用してその配列をソートします
  3. 行を正しい順序でテーブル本体に追加します

比較する値を事前に計算すると (すべての比較で DOM 要素にアクセスする代わりに)、通常は少し速くなります。配列には、一方のスロットに値があり、もう一方のスロットにテーブル行要素があるオブジェクトが含まれます。

于 2012-09-07T12:46:02.740 に答える
0

配列がある場合は、sort()おそらく呼び出すのが最善の策です。

function sortArray(a, b){
  //could also say return a-b instead of the blown out if...else construct
  if(a.Age===b.Age) { return 0; }
  else if (a.Age < b.Age) { return -1; }
  else { return 1; }
}

var rows = [{Name: 'Amy', Age: 10}, {Name: 'Bob', Age: 20}];
var sortedArray = rows.sort(sortArray);

他の回答が述べているように、プラグインを使用することもできます。 DataTablesは、私が過去に使用した優れたものです。

于 2012-09-07T12:41:38.673 に答える