8

はい、これを行うためのJS/jQueryプログラムがたくさんあることを私は知っています。現在、http：//www.kryogenix.org/code/browser/sorttable/sorttable.jsを使用しています。非常に簡単です。JSファイルだけで、テーブルにいくつかのクラス属性を追加すれば、すぐに使用できます。特に、それを使用するために実際にJSを知る必要はなく、それを拡張するために独自のJSを作成する必要なしにカスタムソートキーを追加できます。私はこれらの2つの理由でそれがとても好きです。主な問題：私のテーブルの長さは約9300行で、並べ替えには10〜20秒かかります。だから私は疑問に思っています、これよりも速い他のスクリプトはありますか？これらは私が見つけたものです：

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html（これが何を使用するかさえわかりません）
http://tablesorter.com/docs/（本当に素晴らしいですが、拡張するのは簡単ではありません。JS/を知っている必要がありますjQuery） http://flexigrid.info/（Overkill、データ操作プログラム全体ではなく、テーブルソーターが必要です）
http://datatables.net/（Overkill、Js / jQueryを拡張する必要があります）

私がやりたいことを実行できるプログラムは他にも5000あると思いますが、それらすべてを理解してテストし、高速かどうかを確認する時間がありません。したがって、StackOverflowの誰かが、高速であることがわかっているライブラリを教えてくれるかどうかを知りたいので、1つのプログラムの使用方法を理解するだけで済みます。

（ところで、Javaがクイックソートを使用してミリ秒単位で数十万の数値をソートするのを見てきました。JS.sort（）が使用するアルゴリズムを知っている人はいますか？）

4

4 に答える 4

8

私はあなたが話しているものと同様の行番号を持つDataTables（別のjQueryプラグイン）で大成功を収めました。javascriptで見た速度の低下は、javaで見たものよりも、実際にはDOMをレンダリングしていることです。これは、はるかに多くの作業です。DataTablesの優れている点は、javascript配列（基本的にはjson）からデータを取得できることです。そのため、並べ替えは配列で行われ（javaと同様の速度）、ユーザーが表示する必要があるのはテーブルの一部のみです。 DOMで生成されます。

例については、次のURLを参照してください。

http://datatables.net/examples/data_sources/js_array.html

また

http://datatables.net/examples/data_sources/ajax.html

後者を使用することをお勧めします。それでも静的json配列を使用しても十分な速度が得られない場合は、サーバーサイドスクリプトを作成して、JavaScriptの負荷を軽減する必要があります。サーバーサイドコードの優れた例を次に示します。

http://datatables.net/examples/data_sources/server_side.html

編集：無限スクロール

コメントで説明されているように、問題は並べ替えではなく、HTMLテーブルをJSに変換して戻すことです。これは、ユーザーが表示したときに返されたソートのレンダリング部分のみをロードすることで役立つ場合があります。サーバーは、JSにJSON形式のテーブルと同じ情報も提供します。これらの2つの手法により、HTML-JSの変換とレンダリングの問題が解消され、速度が大幅に向上します。

HTML（JSONが登場する前に最初にレンダリングする必要があるのはこれだけです-列と同じ数のタグを追加してください）：

<table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JQUERY：

$(document).ready(function() {
    $('#table_id').dataTable( {
        "bScrollInfinite": true,
        "bScrollCollapse": true,
        "sScrollY": "200px",
        "bProcessing": true,
        "sAjaxSource": 'array.txt'
    });
});

array.txtに含まれるもの：

{ "aaData": [
    ["This will be in column 1","This in two","this in 3"],
    ["another row - column 1","another two","another 3"]
]}
于 2012-07-03T05:13:58.067 に答える
2

ライブラリとは別に、テーブルの並べ替えは自分で行うのは非常に簡単です。

行を実際に並べ替えるのにかかる時間は、DOM がアイテムを移動するのに必要な時間と比較すると、無視できます。

最高のパフォーマンスを提供する 1 つのことは、行を切り離し、必要に応じて配置し、再度接続することです。生の JSON データは必要ありません。$tr を切り離し、td から比較する値を取得し、$tr の配列を作成し、必要な列に従ってこの配列を並べ替えて、tbody に戻します。

たとえば、この手法を使用すると、1 秒で 15 列の 3000 行を並べ替えることができますが、これは完全に実行可能です。そのパフォーマンスでは、唯一の問題は、ブラウザーに 3000 行をフェッチする方法です...

于 2014-10-13T23:28:38.267 に答える