JqxGrid + ASP.Net MVC Sayfalama Örneği | Javascript

Merhaba, JqxWidget framework kullanıyorum bir süredir. Bir çok noktada işimi görüyor. Grid’i de başarılı. Basit bir sayfalama örneğini burada paylaşmak istedim.

UrunSatisKarMarj.cshtml

@{
    ViewBag.Title = "UrunSatisKarMarj";
}
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.fresh.css" type="text/css" />
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap.min.css">
<script src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxComboBox.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var srcSatisKarMarjiParametre =
        {
            datatype: 'json',
            datafields: [,
                { name: 'Id', type: 'int' },
                { name: 'FirmaKodu', type: 'string' },
                { name: 'MalzemeNo', type: 'string' },
                { name: 'NakliyeMarji', type: 'float' },
                { name: 'EkMarj', type: 'float' }
            ],
            cache: false,
            id: 'Id',
            async: true,
            root: "data.data.d",
            beforeprocessing: function (data) {
                srcSatisKarMarjiParametre.totalrecords = data.data.etkilenenKayitSayisi;
            }
        };
        let daSatisKarMarjiParametre = new $.jqx.dataAdapter(srcSatisKarMarjiParametre, {});
        var _iseSecili = false;
        $("#divGridUrunKarMarj").jqxGrid({
            width: '100%',
            theme: 'fresh',
            source: daSatisKarMarjiParametre,
            height: 500,
            showtoolbar: true,
            editable: true,
            columnsresize: true,
            virtualmode: true,
            selectionmode: 'singlecell',
            columns: [
                { text: 'Seç', datafield: 'IseSecili', columntype: 'checkbox', width: 60, pinned: true },
                { text: 'Id', datafield: 'Id', width: 100, editable: false },
                { text: 'Firma', datafield: 'FirmaKodu', width: 100 },
                { text: 'Malzeme No', datafield: 'MalzemeNo', width: 200 },
                { text: 'Gümrük Marjı', datafield: 'GumrukMarji' },
                { text: 'Ek Marjı', datafield: 'EkMarj' }
            ],
            rendertoolbar: function (toolbar) {
                var container = $("<div style='margin: 5px;'></div>");
                toolbar.append(container);
                container.append('<input id="selectdeselectrowbuttonTab4" type="button" value="Seç" />');
                $("#selectdeselectrowbuttonTab4").jqxButton({ template: 'inverse' });
                $("#selectdeselectrowbuttonTab4").on('click', function () {
                    var rows = $('#divGridUrunKarMarj').jqxGrid('getrows');
                    var ids = new Array();
                    _iseSecili = !_iseSecili;
                    for (var i = 0; i < rows.length; i++) {
                        rows[i].IseSecili = _iseSecili;
                        ids.push($('#divGridUrunKarMarj').jqxGrid('getrowid', i));
                    }
                    $("#divGridUrunKarMarj").jqxGrid('updaterow', ids, rows);
                });
            },
            pageable: true,
            pagesize: 100,
            pagermode: 'simple',
            rendergridrows: function (obj) {
                return obj.data;
            }
        });
        $("#txMalzemeAra4").jqxInput({ placeHolder: 'Ara', width: '100%', height: 30 });
        $('#txMalzemeAra4').on('keypress',
            function (e) {
                if (e.keyCode == 13) {
                    malzemeAra();
                }
            }
        );
        $("#btnMalzemeAra4").jqxButton({ template: 'warning', width: "100%", height: 30 });
        $('#btnMalzemeAra4').click(function () {
            malzemeAra();
        });
        function malzemeAra() {
            srcSatisKarMarjiParametre.url = "UrunSatisKarMarjiFiltreIle";
            daSatisKarMarjiParametre = new $.jqx.dataAdapter(srcSatisKarMarjiParametre, {
                autoBind: false,
                formatData: function (data) {
                    $.extend(data, {
                        pagesize: 100,
                        anahtarKelime: $("#txMalzemeAra4").val()
                    });
                    return data;
                },
                contentType: 'application/json; charset=utf-8',
                downloadComplete: function (data, textStatus, jqXHR) {
                    return data.data.d;
                }
            });
            $("#divGridUrunKarMarj").jqxGrid({
                source: daSatisKarMarjiParametre
            });
        }
    });
</script>
<div class="container pr-1 pl-1" style="width: 100%; padding-top:70px;">
    <div class="row m-1">
        <div class="col-md-3 col-sm-12" style="text-align: right; margin: 0px; ">
            <input type="text" id="txMalzemeAra4" />
        </div>
        <div class="col-md-2 col-sm-12" style="text-align: right; margin: 0px; ">
            <input value="Search" type="button" id="btnMalzemeAra4" />
        </div>
        <div class="col-md-7 col-sm-12">
            &nbsp;
        </div>
    </div>
    <div class="row" style="margin:0px; padding:0px; width:100%">
        <div class="col-md-12 col-sm-12" id="divGridUrunKarMarj" style="margin:0px; padding:0px; width:100%">
        </div>
    </div>
</div>

TestController.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.Mvc;

namespace WebTestUygulamasi.Controllers
{
    public class TestController : Controller
    {
        public ActionResult UrunSatisKarMarj()
        {
            return View();
        }

        public JsonResult UrunSatisKarMarjiFiltreIle(int pagenum, int pagesize, string anahtarKelime)
        {
            int toplamKayitSayisi = 450; // 100 x 5 sayfa olsun.
            DtoFiyatParametre objDto = new DtoFiyatParametre()
            {
                LstUrunSatisKarMarj = new List<UrunSatisKarMarj>()
            };
            for (int i = pagesize * pagenum; i < pagesize * (pagenum + 1); i++)
            {
                objDto.LstUrunSatisKarMarj.Add(new UrunSatisKarMarj() { Id = i, FirmaKodu = "01", MalzemeNo = "Malzeme-" + i.ToString(), NakliyeMarji = 0.3m * i, EkMarj = 0.01m * i });
            }
            return new JsonResult()
            {
                Data = new
                {
                    success = 1,
                    data = new
                    {
                        hata = objDto.Aciklama,
                        d = objDto.LstUrunSatisKarMarj,
                        etkilenenKayitSayisi = toplamKayitSayisi
                    }
                },
                ContentType = "application/json",
                ContentEncoding = Encoding.UTF8,
                JsonRequestBehavior = JsonRequestBehavior.AllowGet,
                MaxJsonLength = Int32.MaxValue
            };
        }
    }

    public class DtoFiyatParametre
    {
        public int ToplamKayitSayisi { get; set; }
        public string Aciklama { get; set; }
        public List<UrunSatisKarMarj> LstUrunSatisKarMarj { get; set; }
    }

    public class UrunSatisKarMarj
    {
        public int Id { get; set; }
        public string FirmaKodu { get; set; }
        public string MalzemeNo { get; set; }
        public decimal NakliyeMarji { get; set; }
        public decimal EkMarj { get; set; }
    }
}

Selamlar.