Extjs实现分页效果

Extjs实现分页还是比较简单的，主要是这套流程弄明白就可以了。（Extjs4.0以后版本适用）

首先js文件需要引入PagingMemoryProxy.js

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '../../../Scripts/ExtJS/ux');
Ext.require([
  'Ext.ux.pagingMemoryProxy.PagingMemoryProxy',
]);

Extjs中引入，当然在HTML页面引入也可以，注意顺序放对就可以了。

定义单页显示记录条数：var itemsPerPage = 20;//单页显示记录条数

在store中添加pageSize和root以及totalProperty

//表格数据源
    var gridStore1 = Ext.create('Ext.data.Store', {
        autoLoad: false,
        fields: ['id', 'stateName', 'ariNumber', 'Tagid', 'FactoryId', 'WorkShopId', 'operator', 'operateTime', 'totalCount'],
        pageSize: itemsPerPage,
        proxy: {
            type: "ajax",
            actionMethods: { read: "POST" },
            url: "CommunicationStatusCFFind.aspx?method=GetCommunicationStatusCFData",
            reader: {
                type: "json",
                root: 'items',
                totalProperty: 'totalProperty'
            }
        }
       
    });

这种方式是通过和C#后台交互返回totalproperty的属性值得。

 var grid1 = Ext.create('Ext.grid.Panel', {
        forceFit: true,
        border: 0,
        store: gridStore1,
        columnLines: true,
        columns: [
            new Ext.grid.RowNumberer(),
            {
                text: 'ID号',
                width: 100,
                dataIndex: 'id',
                field: {
                    xtype: 'textfield'
                }
            },
            {
                text: '通讯状态名称',
                width: 100,
                dataIndex: 'stateName',
                field: {
                    xtype: 'textfield'
                }
            },
            {
                text: '所属车间',
                width: 120,
                dataIndex: 'workShopId'
            },
            {
                header: '工厂名称',
                dataIndex: 'FactoryId',
                align: 'center'
            },
            {
                header: '车间名称',
                dataIndex: 'WorkShopId',
                align: 'center'
            },
            {
                text: '操作人',
                width: 150,
                dataIndex: 'operator',
            },
            {
                text: '操作时间',
                width: 150,
                dataIndex: 'operateTime',
            }
        ],
        dockedItems: [
            {
                xtype: 'toolbar',
                height: 30,
                items: [
                    '<div>-</div>',
                    {
                        xtype: 'combo',
                        labelWidth: 65,
                        labelAlign: 'right',
                        width: 185,
                        id: 'theFactory',
                        fieldLabel: '工厂名称',
                        editable: false,
                        queryMode: 'local',
                        valueField: 'id',
                        displayField: 'AriName',
                        store: FactoryStore
                    },
                    {
                        xtype: 'combo',
                        labelWidth: 65,
                        labelAlign: 'right',
                        width: 185,
                        id: 'theWorkShop',
                        fieldLabel: '车间名称',
                        editable: false,
                        queryMode: 'local',
                        valueField: 'id',
                        displayField: 'AriName',
                        store: WorkShopStore
                    },
                    {
                        xtype: 'combo',
                        labelWidth: 65,
                        labelAlign: 'right',
                        width: 255,
                        id: 'theDevice',
                        fieldLabel: '设备名称',
                        editable: false,
                        queryMode: 'local',
                        valueField: 'id',
                        displayField: 'AriName',
                        store: DeviceStore
                    },
                    '->',
                    {
                        text: '查询',
                        width: 70,
                        handler: function () {
                            var FactoryId = Ext.getCmp("theFactory").getValue();
                            var WorkShopId = Ext.getCmp("theWorkShop").getValue();
                            var DeviceId = Ext.getCmp("theDevice").getValue();
                            var proxy1 = gridStore1.getProxy();
                            proxy1.extraParams = {
                                FactoryId: FactoryId,
                                WorkShopId: WorkShopId,
                                DeviceId: DeviceId
                            };
                            gridStore1.load();
                        }
                    },
                    ' '
                ]
            },
            {
                xtype: 'pagingtoolbar',
                store: gridStore1,   // same store GridPanel is using
                dock: 'bottom',
                displayInfo: true
            }
        ],
        renderTo: Ext.getBody()
    });

在表格grid中的dockeditems中添加分页以及跳转的工具栏

 {
                xtype: 'pagingtoolbar',
                store: gridStore1,   // same store GridPanel is using
                dock: 'bottom',
                displayInfo: true
            }

C#后台获取数据：只需要返回单页的记录条数，不要返回所有的，否则分页效果显示不出来，仍然显示所有的

public void GetCommunicationStatusCFData()
        {
            int enterpriseId = AriMethod.GetEnterpriseId(); //企业Id
            string factoryId = Request["FactoryId"];
            string workShopId = Request["WorkShopId"];
            string DeviceId = Request["DeviceId"];
            string start = Request["start"];
            string limit = Request["limit"];
            List<Model.ModuleHB.CommunicationStatusCF> models = BLL.ModuleHB.CommunicationStatusCFManager.GetAllCommunicationStatusCF(enterpriseId,factoryId,workShopId,DeviceId);

            int totalProperty = models.Count;
            int end = Convert.ToInt32(start) + Convert.ToInt32(limit);
            if (end > totalProperty)
            {
                end = totalProperty;
            }

            DataTable tbl = new DataTable();
            tbl.Columns.Add("id", typeof(String));//id
            tbl.Columns.Add("stateName", typeof(String));//状态名称
            tbl.Columns.Add("ariNumber", typeof(String));//设备编码
            tbl.Columns.Add("Tagid", typeof(String));
            tbl.Columns.Add("FactoryId", typeof(String));
            tbl.Columns.Add("WorkShopId", typeof(String));
            tbl.Columns.Add("operator", typeof(String)); //操作人
            tbl.Columns.Add("operateTime", typeof(String)); //操作时间
            for (int i = Convert.ToInt32(start); i < end; i++)
            {
                DataRow row = tbl.NewRow();
                row["id"] = models[i].AriId;
                row["stateName"] = models[i].StateName;
                if (BLL.ModuleHB.EnvironmentEquCFManager.GetOne(enterpriseId, models[i].AriNumber) != null)
                    row["ariNumber"] = BLL.ModuleHB.EnvironmentEquCFManager.GetOne(enterpriseId, models[i].AriNumber).AriName;
                else
                    row["ariNumber"] = models[i].AriNumber;

                row["Tagid"] = models[i].Tagid;

                if (BLL.ModuleHB.FactoryCFManager.GetOne(enterpriseId, models[i].FactoryId) != null)
                    row["FactoryId"] = BLL.ModuleHB.FactoryCFManager.GetOne(enterpriseId, models[i].FactoryId).AriName;
                else
                    row["FactoryId"] = models[i].FactoryId;

                if (BLL.ModuleHB.WorkSpaceCFManager.GetArinumber(enterpriseId, models[i].WorkShopId) != null)
                    row["WorkShopId"] = BLL.ModuleHB.WorkSpaceCFManager.GetArinumber(enterpriseId, models[i].WorkShopId).AriName;
                else
                    row["WorkShopId"] = models[i].WorkShopId;

                row["operator"] = models[i].Operator;
                row["operateTime"] = models[i].OperateTime;
                tbl.Rows.Add(row);
            }

            string json = JSON.Encode(tbl);
            json = "{'items':" + json + "," + "'totalProperty':" + totalProperty + "}";
            Response.Write(json);
            Response.End();
        }

其中start和limit参数不需要在前端定义，这应该是PagingMemoryProxy中有的参数，在后台直接Request获取即可。