使用WCF服務和asp.net在Jqgrid中進行自定義分頁

Question

這是我綁定Jqgrid的代碼，在我的程序中，我正在獲取25000條記錄，這使網格非常慢，因此我需要在JqGrid中實現自定義分頁，以便一次只能加載50條記錄。

<script type="text/javascript">

    $(document).ready(function () {

        $("#TableDataGrid").jqGrid({
            url: '/DataHandler.ashx?MethodName=TFNUserView&GroupNameQuery=<%=Master.GroupName %>&isadminCheck=<%=Master.Admin %>&isActiveCheck=<%=false %>',

            datatype: "json",
            colNames: ['ID', 'TFN', 'Group', 'Sub Group', 'Tactic', 'Sub Tactic', 'Micro Tactic',
                       'Campaign Name', 'Campaign Start Date', 'Campaign End Date', 'PCC',
                       'Segmentation', 'Vanity Description', 'Message', 'Notes', 'Organization', 'Product', 'Owner', 'Agency', ],
            prmNames: { id: 'TFN' },
            colModel: [
                {
                    name: 'ID', index: 'ID', hidden: true,
                    editoptions: { disabled: true }, width: 80, "sortable": true, editable: true, sorttype: 'integer',
                    searchoptions: {
                        sopt: ['eq'], dataInit: function (elem) {
                            $(elem).height(21).width(40);
                        }
                    }, searchrules: { required: true }
                },
                {
                    name: 'TFN', index: 'TFN', key: true, edittype: 'select', formatter: 'showlink', width: 110,
                    formatoptions: { baseLinkUrl: 'TFNEdit.aspx' }, editable: true, sorttype: 'integer',
                    searchoptions: {
                        sopt: ['eq', 'ne'],
                        dataInit: function (elem) {
                            $(elem).height(21).width(60);
                        }
                    }, searchrules: { required: true }
                },
                { name: 'TeamName', index: 'TeamName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
                { name: 'LanguageGroupName', index: 'LanguageGroupName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },

                { name: 'TacticName', index: 'TacticName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
                { name: 'SubtacticName', index: 'SubtacticName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
                { name: 'MicrotacticName', index: 'MicrotacticName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },

                { name: 'MarketingCampaignName', index: 'MarketingCampaignName', width: 190, editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
                {
                    name: 'MarketingCampaignStartDate', index: 'MarketingCampaignStartDate', width: 190, editable: true, sorttype: 'date',
                    searchoptions: { sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le'] }, formatter: 'date', datefmt: 'm/d/Y', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' },
                    editoptions: {
                        size: 12, dataInit: function (elem) {
                            setTimeout(function () {
                                $(elem).datepicker({ showOn: 'button' });
                            }, 100);
                        }
                    }, searchrules: { required: true }
                },
                {
                    name: 'MarketingCampaignEndDate', index: 'MarketingCampaignEndDate', width: 190, editable: true, sorttype: 'date',
                    searchoptions: { sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le'] }, formatter: 'date', datefmt: 'm/d/Y', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' },
                    editoptions: {
                        size: 12, dataInit: function (elem) {
                            setTimeout(function () {
                                $(elem).datepicker({ showOn: 'button' });
                            }, 100);
                        }
                    }, searchrules: { required: true }
                },
                { name: 'PCC', index: 'PCC', editable: true, sorttype: 'text', width: 190, searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
                { name: 'Segmentaion', index: 'Segmentaion', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
                { name: 'VanityDescription', index: 'VanityDescription', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
                { name: 'GeneralNotes', index: 'GeneralNotes', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
                { name: 'Notes', index: 'Notes', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
                { name: 'Organization', index: 'Organization', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true }, hidden: checkAdmin() },


                { name: 'Product', index: 'Product', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true }, hidden: checkAdmin() },
                { name: 'OwnerName', index: 'OwnerName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
                { name: 'Agency', index: 'Agency', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }



            ],
            rowNum: 20,
            rowList: [20, 100, 1000,10000],
            pager: $('#DivPager'),
            viewrecords: true,
            loadonce: true,
            sortable: true,
            width: "100%",
            autowidth: false,
            shrinkToFit: false,
            forceFit: false,
            ignoreCase: true,
            caption: "TFN User View"

        });
        $("#TableDataGrid").jqGrid('filterToolbar', { searchOperators: true });
        $("#TableDataGrid").jqGrid('navGrid', '#DivPager', { add: false, edit: false, del: false, cancel: true, save: true, addtext: "Add", edittext: "Edit", deltext: "Delete", searchtext: "Search", refreshtext: "Refresh" },


        $("#TableDataGrid").setGridParam({
            onPaging: function (pgButton) {

                var pageNumber = $("#TableDataGrid").getGridParam("page");
                var lastPage = $("#TableDataGrid").getGridParam("lastpage");
                alert(pageNumber + "" + lastPage);

                //...
            }
        });
       // var requestedPage = $("#grid").getGridParam("page");
       // var lastPage = $("#grid").getGridParam("lastpage");

</script>

Here is json response  

 response = Convert.ToString(TfnUserView(groupName,isAdminCheck,isActiveCheck));

我正在調用WCF服務，這里是代碼

    public string TfnUserView(string groupName, string isAdminCheck)
    {
        using (TFNEntities db = new TFNEntities())
        {
            var serializer = new JavaScriptSerializer();
            serializer.MaxJsonLength = Int32.MaxValue;                
            string[] groupNames = groupName.Split(',');
            string jsonData = "";
            var query =   from st in db.TFN_Campaigns
                          join tac in db.TFN_Records on st.TFN equals tac.TFN
                          join rou in db.TFN_ROUTING_REFERENCE_VIEW on st.TFN equals rou.TOLL_FREE_NO
                          where st.Status == false && tac.IsUnable == false
                          select new
                          {
                              st.TFN,st.Language,st.TeamName,st.CreatedOn,st.Status,tac.IsUnable,rou.ROUTE_TYPE ,
                              rou.ROUTE_DESCRIPTION
                          };

            if (isAdminCheck == "True" || isAdminCheck == "true")
            {
                jsonData = serializer.Serialize(query.ToList().OrderBy(item => item.ROUTE_DESCRIPTION).Take(200254));                    
            }
            else
            {                    
                jsonData = serializer.Serialize(query.Where(item => groupNames.Contains(item.TeamName)).OrderBy(i=>i.ROUTE_DESCRIPTION).Take(25000));                 
            }

            return jsonData;
        }
    }

Answer 1

首先，此鏈接： http : //www.trirand.com/jqgridwiki/doku.php?id= wiki:pager將幫助您在Jqgrid中配置分頁。

然后，您可能可以再向WCF服務傳遞兩個參數page和rowNum。 然后在linq中使用跳過功能和獲取功能，如下所示。

jsonData = serializer.Serialize（query.ToList（）。OrderBy（item => item.ROUTE_DESCRIPTION）.Skip（page * rowNum）.Take（rowNum））;

這將返回要在WCF的一頁中顯示的記錄上的特定編號。