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

【问题标题】：Extjs Grid paging with Ajax call not working使用 Ajax 调用的 Extjs Grid 分页不起作用
【发布时间】：2023-04-03 17:22:01
【问题描述】：

我能够使用 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();
        }
    }

【问题讨论】：

标签： extjs extjs4

【解决方案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

【讨论】：