7

私の Web アプリでは、データベースから取得したデータを表示するために JQuery DataTablesプラグインを使用しています。

現在、クライアント側のページネーションを使用していますが、テーブル内のデータが大幅に増加しており、ASP.NET ページへの読み込みが少し遅くなりました。そのため、サーバー側のページネーションに切り替えることを計画していました。

私は DataTables プラグインがそれをサポートしていることを知っていますが、周りを検索しても、それを実装することについてはっきりとはわかりませんでした。

私の主な疑問は次のとおりです。サーバー側でページネーションを実装する場合、順序付けも実装する必要がありますか、それともクライアント側に委任できますか?

これを経験したことがありますか？

注: Linq to SQL を使用して DB に接続しています

4

3 に答える 3

10

既存の回答は dataTable の古いバージョンに適用される可能性がありpageNo * pageSizeますが、現在のバージョン (私は 1.10 以降を使用しています) は開始レコードと長さを渡すため、示唆するものはすべて間違った結果をもたらします。

最初の単純な「手動」アプローチ

受け入れられた答えも、私がやりたいことに対して非常に複雑でした。デバッグの後、ページサイズと開始レコードがおよびRequestという名前の Http 値として単純に渡されることがわかりました。テキスト検索は次のように渡されます。並べ替え順序は名前付きのメンバーで渡され、並べ替え方向はetcで渡されます。startlengthsearch[value]order[0][column]order[0][dir]

並べ替えとフィルター処理に使用した基本的なコードは次のようになります。

HTTP Request オブジェクトからページング、ソート、およびフィルタリングの値を取得します。

int startRec = 0;
int.TryParse(Request["start"], out startRec);
int pageSize = 10;
int.TryParse(Request["length"], out pageSize);
var search = Request["search[value]"];
var order = Request["order[0][column]"];
var direction = Request["order[0][dir]"];

var query = this._dataStore.Records.AsQueryable();

最初に (大文字と小文字を区別しない) 検索を適用します。

if (!string.IsNullOrWhiteSpace(search))
{
    query = query.Where(x => x.Label.ToLower().Contains(search.ToLower()));
}

次に、並べ替えを適用します。

switch (order)
{
    // My id column
    case "0":
        query = (direction == "desc") ? query.OrderByDescending(x => x.Id) : query.OrderBy(x => x.Id);
        break;
    // My label column
    case "1":
        query = (direction == "desc") ? query.OrderByDescending(x => x.Label) : query.OrderBy(x => x.Label);
        break;
}

最後にページングを適用します。

query = query.Skip(startRec).Take(pageSize);

正しいレコードを返す準備が整いました。

更新 (「Datatables.net for MVC5」を使用)

サーバー側の dataTables の基本を理解したら、このコードを単純化する既存のプラグイン/ユーティリティを探し始めました。これまでに見つけた MVC 5 の最も適切なものは、MVC5 nuget パッケージの Datatables.net です。

  1. NuGet パッケージをインストールする

  2. DataTablesBinderIDataTablesRequest インターフェイスを提供するためにコントローラー アクションを使用するように変更します。

例えば

 public JsonResult Table([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestmodel)
  1. 最初に検索フィルターを適用します。

例えば

if (!string.IsNullOrEmpty(requestmodel.Search.Value))
{
    query = query.Where(x => x.CompanyTypeName.Contains(requestmodel.Search.Value) || x.CompanyTypeDescription.Contains(requestmodel.Search.Value));
}
  1. 任意の並べ替えを適用します。

例えば

foreach (var sort in requestmodel.Columns.GetSortedColumns())
{
    switch (sort.Name)
    {
        case "CompanyTypeDescription":
            query = sort.SortDirection == Column.OrderDirection.Ascendant ? query.OrderBy(x => x.CompanyTypeDescription) : query.OrderByDescending(x => x.CompanyTypeDescription);
            break;
        case "CompanyTypeName":
        default:
            query = sort.SortDirection == Column.OrderDirection.Ascendant ? query.OrderBy(x => x.CompanyTypeName) : query.OrderByDescending(x => x.CompanyTypeName);
            break;
    }
}
  1. 次に、前Skipと同じように とを使用してページングを適用します。Take

例えば

var result = query.Skip(requestmodel.Start).Take(requestmodel.Length).Select(x => new { x.CompanyTypeName, x.CompanyTypeDescription });
  1. 最後に、DataTablesResponseオブジェクトを使用して JSON の結果を返します。

例えば

return Json(new DataTablesResponse(requestmodel.Draw, result, query.Count(), base.RefSureContext.CompanyType.Count()), JsonRequestBehavior.AllowGet);

これにより、すべての検索、並べ替え、およびページングが単純化され、簡単に繰り返すことができるパターンになりました。

アドインのドキュメントはこちらです。

于 2015-03-10T17:08:09.643 に答える
3

LINQ to SQL を使用しているため、ページネーションは非常に簡単です。

var c = new MyDataContext("your string");

c.Employees.Skip(pageIndex * pageSize).Take(pageSize);

このコードは、サーバー上で効果的にページ付けされます

私はDataTables jQuery プラグインを使用していませんが、(MVC を使用していないため) AJAX を使用してデータを取得すると想定しているため、現在のページ インデックスとページあたりの行数 - ページをパラメーターとして送信するだけです。サイズ、それだけです

要件を満たすには、サーバーでもクエリを注文する必要があるため、注文基準をサーバーに送信して注文を適用する必要があります。

に基づいてサーバーで注文するにはstring、次の質問を確認してください。

IEnumerable<T> での動的 LINQ OrderBy

于 2012-07-19T10:14:09.217 に答える
0

パーティーに少し遅れましたが、これは共有する価値があります:)

Employees
    .OrderBy(sortColumn + " " + sortOrder)
    .Skip(pageNo * pageSize)
    .Take(pageSize)
    .ToList();
于 2014-05-21T11:00:32.873 に答える