使用 Ajax 调用的 Extjs Grid 分页不起作用

Posted 2023-02-26

【中文标题】使用 Ajax 调用的 Extjs Grid 分页不起作用

【英文标题】：Extjs Grid paging with Ajax call not working

【发布时间】：2014-12-18 10:43:47

【问题描述】：

我能够使用 servlet 从数据库中检索所有记录，但无法对其执行分页。所有记录都显示在网格上，分页工具栏显示为 1 of 5 of 54 记录，但实际上它显示的是第一页、第二页等中的所有记录....

我做了一些研究，一些用户提到了在服务器端使用启动和限制参数，直到现在我在任何网站上都没有找到相同的线索/示例。如果没有替代且唯一的方法来解决此问题以使用 start 和 limit 参数更改服务器端代码，那么请向我提供有关 java servlet 的示例代码。

还有一点要说的是，oracle 11g 中没有 start 和 limit 参数（忽略 12c），我该如何解决这个问题？

Ext.onReady(function ()

var itemsPerPage =5;
var store = Ext.create('Ext.data.Store',
   storeId: 'resultsetstore',
   autoload: false,
   pageSize:itemsPerPage,
   fields:
           [
                name: 'firstname', id:'firstname',
                name: 'email', id:'email',
                name: 'mobileno', id:'mobileno'
           ],
           proxy:
                   
                       type:'ajax',
                       enablePaging: true,
                       url:'./RetrieveRecords'
                   ,
                   reader:type:'json',totalProperty: 'total'
);
store.load();


Ext.create('Ext.grid.Panel',
    store:store,
    layout: 'border',
    height:300,
    renderTo: Ext.getBody(),
    columns:
            [
                    
                        header: 'Email',
                        id: 'email',
                        dataIndex: 'email',
                        //autoSizeColumn : true,
                        flex: 1,
                        editor: 
                            xtype: 'textarea'
                        
                    ,
                    
                        header: 'Action',
                        id: 'action',
                        align: 'center',
                        xtype: 'actioncolumn',
                        autoSizeColumn: true,
                        //flex: 1, 
                        sortable: false,
                        items:
                                [
                                    
                                        icon: 'images/icons/cancel.png',
                                        tooltip: 'Delete',
                                        handler: function (grid, rowIndex, colIndex)
                                        
                                            var rec = grid.getStore().getAt(rowIndex);
                                            var email = rec.get('email');
                                            Ext.Ajax.request(
                                                    
                                                        url: './deleteRecords',
                                                        params: email: email,
                                                        method: 'GET',
                                                        success: function (response)
                                                        
                                                            Ext.Msg.alert("successfully deleted" + " " + response.status);
                                                            window.location.reload();
                                                        ,
                                                        failure: function (response)
                                                        
                                                            Ext.Msg.alert("failed" + response.status);
                                                        
                                                    );
                                        
                                    
                                ]
                            
                        ],
                dockedItems:
                        [
                            
                                xtype: 'pagingtoolbar',
                                store: store,
                                dock: 'bottom',
                                displayInfo: true
                            
                        ]
                    );
);

这是我的服务器端代码（java servlet）：

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException, Exception 
    
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        JSONArray jarray = new JSONArray();
        try
        
            Connection con = DBConnection.getConnection();
            Statement st = con.createStatement();
            String query = "select EMAIL,MOBILENO,FIRSTNAME from UP_CLOUD_REGISTRATION";
            ResultSet rs = st.executeQuery(query);

            while(rs.next())
            
                JSONObject json = new JSONObject();
                json.put("email",rs.getString("email"));
                json.put("mobileno", rs.getString("mobileno"));
                json.put("firstname", rs.getString("firstname"));
                jarray.add(json);
            
            out.println(jarray);
            System.out.println(jarray);
        
        catch(Exception e)
        
            e.printStackTrace();
        
    

【参考方案1】：

Oracle 有 start 和 limit，但名称不同 rownum 和 limit by

我正在修改您的查询..假设您正在从 ext js 开始和限制到您的servelt

  select EMAIL,MOBILENO,FIRSTNAME from UP_CLOUD_REGISTRATION where rownum>=start and limit by limit(value from ext js)

假设你的 start =3 并且 limit 是 10

 select EMAIL,MOBILENO,FIRSTNAME from UP_CLOUD_REGISTRATION where rownum>=3 and limit by 10