0

従業員のリストを表示するデータテーブルがあります。従業員数が 0 ～ 2000 の範囲の場合は問題なく動作しますが、その後、そのページをロードするときに深刻な遅延が発生します。ページの読み込み時に大量のデータが読み込まれるため、これは驚くべきことではありません。私はどこを見ても、サーバー側の処理を行う方法を示す良い例を見つけることができませんでした. git ハブで見つけたプロジェクトは、私のコンピューターでは実際には機能していません (多くの「欠落参照」エラーが発生しました)。これは私が今取り組んでいるコードです

employees.cshtml

@model EmployeeList
@{
    Layout = null;
    ViewBag.Title = "employees";
}
<html>
<head>

<head/>
<body>
      <table id="employees_gridView">
            <thead>
                <tr>
                    <th
                        Name
                    </th>
                    <th>
                        Username
                    </th>
                    <th>
                        Job Category
                    </th>
                    <th>
                        Hire Date
                    </th>
                </tr>
            </thead>
            <tbody>
            @if (Model.RowList != null)
            {
                foreach (var item in Model.RowList)
                {


                <tr>
                    <td >
                        @Html.DisplayFor(i => item.DisplayName)
                    </td>
                    <td >
                        @Html.DisplayFor(i => item.UserName)
                    </td>
                    <td>
                        @Html.DisplayFor(i => item.JobCategoryName)
                    </td>

                    <td>
                        @Html.DisplayFor(i => item.hireDate)                          
                    </td>

                </tr>
                }
            }
            </tbody>
            <tfoot>
            </tfoot>
        </table>
    </div>
</div>

データテーブルjqueryは次のようになります

$(document).ready(function(){
$('#employees_gridView').dataTable({
            "bDestroy":true,
            "bSortClasses": false,
            "bDeferRender": true,  
            // here is the default setting for number of results to show on a page
            "iDisplayLength": 10,
            "bJQueryUI": true,  
            "sPaginationType": "full_numbers",

            "aaSorting" :[],
            // here are the column specific settings
            "aoColumns": [
            {"aTargets": [ 0,1 ]},
                         null,
                         {"sClass": "DataTableCenterColumn"},   
                         {"sType":"date", "sClass": "DataTableCenterColumn" 
             }]
        });
});

そして、これはページ読み込みリクエストを処理するコントローラーメソッドです

public ActionResult Index()
    {
        EmployeeList employeeList = getEmployeeList();
        return View("Index", employeeList );
    }

このクライアント側のデータテーブルをサーバー側の処理データテーブルに変更する方法を教えてください。

4

2 に答える 2

1

私は前に datatables プラグイン コードに JQuery を使用したことがあり、データをすばやく取得しても (つまり、localhost)、それでも遅いです。JavaScript/DOM 操作に多くの時間を費やしています。高速化するには、JQuery データテーブルを仮想化する必要があります。SO、実際にはクライアントとサーバーの両方のコードを変更する必要があります。

ステップ 1 ) 行の適切なサブセットを返す、繰り返し可能な SQL proc が必要です。合計 2000 行あるとします。次のようなストアド プロシージャが必要です。

GetEmployeDataRows(@startingrow) -- またはページ番号、または都合のよいもの。

適切に「サブセット化」できる安定したクエリがあることを確認してください。これは、高速にしたいステップ 1 の鍵です。Row# または Page# は適切な選択ではない場合があります。たとえば、順序付けられた主キーの行を返す場合、サブセット パラメータを @empnum として渡し、GetEmployeDataRows で EmployeeNumber > @empnum をインクルードする方が賢明な場合があります。

ステップ 2 ) パラメータとして開始行 (など) を取る Web サービス (通常はブラウザの使用に最適な JSON ベース) を公開します。

ステップ 3 ) -- json サービスに基づいてデータベースを仮想化します。

したがって、これは簡単な作業ではありませんが、これを本当に解決する正しい方法です。これらの各ステップには、たくさんの例があります。

-- フォローアップもっと明確にするべきでした。大量のデータがある場合、DataTables は遅くなります。20 列の行が 1000 行ある場合、仮想化なしで使用することは決してお勧めしません。私には遅すぎます。サポートされている古い IE を使用している場合は、もちろん通常よりもさらに遅くなります。

于 2013-08-23T22:50:14.620 に答える
0

ここでは、ajax によるサーバー側処理の例を示します。私はこれに対処しましたが、私の解決策は非常に複雑です。あなたがそれを作るつもりなら、サーバーから応答しなければならないjson構造に注意してください。

于 2013-08-23T21:44:00.173 に答える