假定我们现在每页只显示25Item(产品条目),而现在数据库里面有33Item记录,所以应该分2页显示

 

显示结果:

 

第一页:


 

当你选择底部分分页栏的 向后箭头 或者直接在输入框里面输入页码,比如2的时候

他会自动翻到第二页


 

 

 

技术实现:

 

只需要改2个文件:

 

1.       B/E ,Spring控制器里面(对应这个例子是ItemController),加入如下代码,用于显示在指定区间里面的总记录的子集

//the pagination feature by Charles 注解部分开始,主要做了以下事情:

(1)      分离从ext-js传来的参数,其中start是起始页,limit是每页最大显示多少记录数(我们采用25

(2)      参数正确性检查

(3)      计算实际该页要显示的记录数(考虑到尾页情况,所以这个记录数是 limittotal-start的较小值

(4)      创建一个Json对象返回,并且它包含3个信息【success ,total,data

Success还和以前一样,表示给Extjs前端判断的操作成功与否

Total: 表示总记录数,必须传给客户端,从而让框架帮计算出需要的页数

Data: 这个页面要显示的数据集合(总数据集的子集)

 


 

 

2.       F/EExtjs中用于显示页面的视图中(对应ItemPanel.js),加入以下信息,见粗体字显示部分:

1)创建一个bbar控件(bbar 表示bottom bar,表示底部分页控件)

2)设置一些参数用于显示控件的外观

3)设置doLoad方法,用于每次将新的设定的startlimit参数传递给B/ESpring控制器

 


  1. Ext.define('CA.view.item.ItemPanel', { 
  2.  
  3.      extend : 'Ext.Viewport'
  4.  
  5.      alias : 'widget.itempanel'
  6.  
  7.      layout : 'anchor'
  8.  
  9.      requires :      ['CA.view.item.ItemGridList'], 
  10.  
  11.      autoShow : true
  12.  
  13.      initComponent : function() { 
  14.  
  15.      console.log("creating the CA.view.item.ItemPanel panel"); 
  16.  
  17.   
  18.  
  19.   this.items = [ 
  20. header = Ext.create('CA.view.header.Header'), 
  21.  
  22. menuToolBar = Ext.create('CA.view.main.MenuToolBar'), 
  23.  
  24. itemGridList = Ext.create('CA.view.item.ItemGridList'), 
  25.  
  26.  bbar = new Ext.PagingToolbar({ //-======定义翻页控件 
  27.  
  28.      pageSize : 25, // 参数1:每页显示数 
  29.  
  30.      store : 'Item'// 数据源---非常重要 
  31.  
  32.      displayInfo : true
  33.  
  34.      beforePageText : '第'
  35.  
  36.      afterPageText : '/{0}页'
  37.  
  38.      firstText : '首页'
  39.  
  40.      prevText : '上一页'
  41.  
  42.      nextText : '下一页'
  43.  
  44.      lastText : '尾页'
  45.  
  46.      refreshText : '刷新'
  47.  
  48.      displayMsg : '显示第{0}条数据到{1}条数据,一共有{2}条'
  49.  
  50.      emptyMsg : '没有记录'
  51.  
  52.      doLoad : function(start) { 
  53.        //点下一页时,会把把新的start和limit传入后台 
  54.  
  55.        record_start = start; 
  56.  
  57.        var o = {}, pn = this.paramNames; 
  58.  
  59.        o[pn.start] = start; 
  60.  
  61.               
  62.        o[pn.limit] = this.pageSize; 
  63.  
  64.        store.load( {params:o}); 
  65.  
  66.                } 
  67.  
  68.          })]; 
  69.  
  70.   
  71.  
  72.       this.callParent(arguments); 
  73.  
  74.   
  75.  
  76.            } 
  77.  
  78.   
  79.  
  80.       }); 
  81.  
  82.   
  83.  
  84.