Ext-js 分页实现 (后台用Spring MVC)

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

 

显示结果：

 

第一页：

 

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

他会自动翻到第二页

 

 

 

技术实现：

 

只需要改2个文件：

 

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

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

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

（2）      参数正确性检查

（3）      计算实际该页要显示的记录数（考虑到尾页情况，所以这个记录数是 limit和total-start的较小值

（4）      创建一个Json对象返回，并且它包含3个信息【success ,total,data】

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

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

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

 

 

 

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

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

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

（3）设置doLoad方法，用于每次将新的设定的start和limit参数传递给B/E的Spring控制器

 

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.   

本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/834224，如需转载请自行联系原作者