jsgrid - jsGrid プリロード ページ先

Question

大量のデータを含むテーブルがあるため、ページごとにアイテムをロードしたいのですが、ユーザーがクリックしたページごとにアイテムをロードしたくありません。代わりに、(たとえば) 1000 個のアイテムを事前に読み込み、まだデータを取得していないページにユーザーが移動した場合にのみ、より多くの結果を取得します。出来ますか？

Answer 1

スクリプト セクション

<script type="text/javascript">
    $(document).ready(function () {
        List();
    });
    function List() {
        //$(function () {
        loadjsgrid();
        $("#jsGrid").jsGrid({
            height: "auto",
            width: "100%",
            filtering: true,
            editing: false,
            sorting: true,
            autoload: true,
            paging: true,
            pageSize: 10,
            pageButtonCount: 5,
            pageLoading: true,
            controller: {
                loadData: function (filter) {
                    var startIndex = (filter.pageIndex - 1) * filter.pageSize;
                    var d = $.Deferred();
                    $.ajax({
                        type: 'GET',
                        url: '@Url.Action("[ActionName]", "[Controllername]")',
                        data: filter,
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function (data) {
                            if (data.Message == "Failed") {
                                data.Result = [];
                                data.Count = 0;
                            }
                            console.log(data);
                            d.resolve(data);
                        }
                    });
                    return d.promise().then(function (q) {
                        return {
                            data: q.Result,
                            itemsCount: q.Count
                        }
                    });


                }
            },


            },
            fields: [

                { name: "rct_no", type: "text", title: 'Serial Number', autosearch: true, width: '10%' }

            ],

        });
        $("#pager").on("change", function () {
            var page = parseInt($(this).val(), 10);
            $("#jsGrid").jsGrid("openPage", page);
        });
    }

コントローラー部

public ActionResult getList(int pageIndex = 1, int pageSize = 10)
        {
            try
            {

                var query = @"  from rd_receipt_header 
                var irList = DAL.db.Fetch<[className]>(pageIndex, pageSize, @"select * " + query );
                var count = DAL.db.ExecuteScalar<int>("select count(*) " + query);
                return Json(new { Message = "Success", Result = irList, Count = count }, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex) { return Json(new { Message = "Failed", Result = ex.Message }, JsonRequestBehavior.AllowGet); }

ajaxを使用してサーバーからデータをajax形式で取得しています

Answer 2

私はそれを解決する方法を見つけました。

基本的なロジックは次のとおりです。

1. 各ページの結果の配列を保持するローカル データ キャッシュ オブジェクトを作成します。
2. サーバーからデータをフェッチするときは、常に数ページ先のデータを返し、それらをローカル キャッシュ オブジェクトに格納します。
3. 目的のページ結果がローカル キャッシュ オブジェクトにあるかどうかをチェックする controller.loadData のメソッドを作成します。数ページ先。

ローカル キャッシュ オブジェクトのスナップショットの例:

{
    "1": [{name: "ff"}, {name: "fdd"}],
    "2": [{name: "fds"}, {name: "dsr"}],
    "3": [{name: "drr"}, {name: "ssr"}]
}