這篇文章主要介紹了JSP+EXt2.0實現分頁的方法,涉及JavaScript結合JSP遍歷及分頁的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JSP+EXt2.0實現分頁的方法。分享給大家供大家參考。具體如下：

JavaScript代碼：

1. Ext.onReady(function(){ 
2. var sm = new Ext.grid.CheckboxSelectionModel(); 
3. var cm = new Ext.grid.ColumnModel([  
4. new Ext.grid.RowNumberer(),  
5. sm,  
6. {header:'編號',dataIndex:'id',sortable:true},  
7. {header:'名稱',dataIndex:'name',sortable:true},  
8. {header:'性別',dataIndex:'sex',sortable:true,renderer:function(value){  
9. if(value=='male'){  
10. return " <span style='color:red;font-weight:bold;'>紅男 </span> <img src='./img/125.gif'>";  
11. }else{  
12. return " <span style='color:green;font-weight:bold;'>綠女 </span> <img src='./img/123.gif'>";  
13. } 
14. }},  
15. {header:'描述',dataIndex:'descn',sortable:true}  
16. ]);  
17. cm.defaultSortable = true;  
18. var ds = new Ext.data.Store({  
19. proxy: new Ext.data.HttpProxy({url:'page.jsp'}),  
20. reader: new Ext.data.JsonReader({  
21. totalProperty: 'totalProperty',  
22. root: 'root' 
23. },  
24. [  
25. {name: 'id',mapping:'id'},  
26. {name: 'name',mapping:'name'},  
27. {name:'sex',mapping:'sex'},  
28. {name: 'descn',mapping:'descn'}  
29. ]),  
30. remoteSort:true 
31. });  
32. var grid = new Ext.grid.GridPanel({  
33. el: 'grid',  
34. title:'Ext Grid Test',  
35. width:450,  
36. height:410,  
37. trackMouseOver:false,  
38. loadMask: {msg:'正在加載數據，請稍侯……'},  
39. store:ds,  
40. cm: cm,  
41. sm:sm,  
42. bbar: new Ext.PagingToolbar({  
43. pageSize: 5,  
44. store: ds,  
45. displayInfo: true,  
46. displayMsg: '當前顯示 {0} - {1}條記錄 /共 {2}條記錄',  
47. emptyMsg: "No topics to display" 
48. })  
49. });  
50. grid.render();  
51. ds.load({params:{start:0, limit:5}});  
52. }); 

JSP代碼：

1. <%@ page language="java" pageEncoding="UTF-8"%> 
2. <%  
3. String start = request.getParameter("start");  
4. String limit = request.getParameter("limit"); 
5. int index = Integer.parseInt(start);  
6. int pageSize = Integer.parseInt(limit);  
7. String json = "{totalProperty:100,root:[";  
8. String sex=""; 
9. for (int i = index; i < pageSize + index; i++) {  
10. if(i%2==0) 
11. { 
12. sex="male"; 
13. } 
14. else{ 
15. sex="female"; 
16. } 
17. json += "{id:" + i + ",name:'" + i + "',sex:'"+sex+"',descn:'descn" + i  
18. + "'}";  
19. if (i != pageSize + index - 1) {  
20. json += ",";  
21. }  
22. }  
23. json += "]}";  
24. response.getWriter().write(json);  
25. System.out.print(json);  
26. %> 

希望本文所述對大家的JSP程序設計有所幫助。