javascript - 分页适用于静态数据，但不适用于动态数据

Question

我正在尝试使用 json 数据加载网格并在底部栏中进行分页。

我的分页正在加载但无法正常工作。同样，这适用于静态数据。

这是我对静态数据的处理，Fiddle_Static这是我对静态数据的摆弄，Fiddle Dynamic这是我的代码。

var ItemsPerPage = 3;

Ext.create('Ext.data.Store', {
    storeId: 'Store',
        proxy :{
        enablePaging: true,
        type:'ajax',
        url: 'data1.json',
        reader:{
            type:'json',
            rootProperty:"root"
        }
    },
    pageSize: ItemsPerPage,
    autoLoad:true,
    fields: ['Surname','Name','RollNo']
});

Ext.create('Ext.grid.Panel', {
    title: 'Student',
    store:Ext.data.StoreManager.lookup('Store'),

    columns:
[
   { text : 'SName' , dataIndex: 'Surname' ,width : 100},
   { text : 'Name' ,  dataIndex: 'Name' ,width : 100},
   { text : 'RNum' ,  dataIndex: 'RollNo' ,width : 100}
],
    width: 340,
    height:250,
    dockedItems: [{
        xtype:'pagingtoolbar',
        store:'Store',
        dock: 'bottom',
        displayInfo:true
        }],
    renderTo: document.body
});

任何人都可以帮我解决这个问题吗？

Answer 1

针对外部数据源的分页要求服务器仅传送所请求的记录。

当第一个页面加载到网格中时，商店向服务器发送请求:

data1.json?page=1&start=0&limit=3

并期望服务器回答

success:true,
total:27,
data:[{Id:0},{Id:1},{Id:2}] (<-- three items only!)

当用户想要查看第 2 页时，客户端会向服务器发送请求:

data1.json?page=2&start=3&limit=3

并期待答案

success:true,
total:27,
data:[{Id:3},{Id:4},{Id:5}] (<-- three items only!)

等等。

您的数据源现在正在返回所有项目，尽管客户只要求前三个项目。

要在fiddle中获取动态数据源，您必须选中data1.json顶部的“动态数据源”，然后标题更改为:

function(params, req, Fiddle) {

现在您可以填写函数体，例如又快又脏

if(params.page==1)
return {"total":12, "root" : [{
   "Surname": "lisa",
   "Name":"King",
   "RollNo": 1
  },
  {
   "Surname": "John",
   "Name":"Lever",
   "RollNo": 2
  },
  {
   "Surname": "Lee",
   "Name":"Dev",
   "RollNo": 3
  }]};
else if(params.page == 2) 
...

如何在最终项目中执行此操作取决于后端的外观。