JSP+EXt2.0实现分页的方法-Java开发

那么我们来详细讲解一下“JSP+Ext2.0实现分页的方法”的完整攻略。

那么我们来详细讲解一下“JSP+Ext2.0实现分页的方法”的完整攻略。

1. 准备工作

首先，我们需要准备好以下工作：

安装数据库（例如MySQL）和Tomcat服务器。
创建数据库表并插入少量数据，以便进行分页。
下载并添加ExtJS 2.0的库文件到项目中。

2. 创建JSP页面和Servlet

接下来，我们需要创建一个JSP页面，以及一个Servlet来获取并处理数据。

下面是一个示例的JSP页面（假设文件名为data.jsp），其中包括一个显示数据的表格和一个分页栏：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据分页</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="resources/js/ext-base.js"></script>
    <script type="text/javascript" src="resources/js/ext-all.js"></script>
    <script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="data.js"></script>
</head>
<body>
    <table id="dataGrid"></table>
    <div id="pagingBar"></div>
</body>
</html>

具体的实现细节在后面会有说明。

然后，我们需要创建一个Servlet（假设文件名为DataServlet.java），用来处理获取和分页操作：

package com.example;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONObject;

public class DataServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    // 模拟数据
    private List<User> userList = new ArrayList<>();
    {
        userList.add(new User(1, "张三", "男", 23));
        userList.add(new User(2, "李四", "男", 26));
        userList.add(new User(3, "王五", "女", 21));
        userList.add(new User(4, "赵六", "女", 28));
        userList.add(new User(5, "孙七", "男", 29));
        userList.add(new User(6, "周八", "女", 20));
        userList.add(new User(7, "吴九", "男", 24));
        userList.add(new User(8, "郑十", "女", 22));
    }

    public DataServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        int page = Integer.parseInt(request.getParameter("page"));
        int pageSize = Integer.parseInt(request.getParameter("limit"));
        List<User> data = getPageData(page, pageSize);
        JSONObject result = new JSONObject();
        result.put("code", 0);
        result.put("msg", "");
        result.put("count", userList.size());
        result.put("data", data);
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.print(result.toString());
        out.flush();
        out.close();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

    /**
     * 获取指定页码和每页数量的数据
     * @param page
     * @param pageSize
     * @return
     */
    private List<User> getPageData(int page, int pageSize) {
        int start = (page - 1) * pageSize;
        int end = start + pageSize;
        if (end > userList.size()) {
            end = userList.size();
        }
        return userList.subList(start, end);
    }

    /**
     * 用户类
     */
    private static class User {
        private int id;
        private String name;
        private String sex;
        private int age;

        public User(int id, String name, String sex, int age) {
            super();
            this.id = id;
            this.name = name;
            this.sex = sex;
            this.age = age;
        }

        public int getId() {
            return id;
        }

        public void setId(int id) {
            this.id = id;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public String getSex() {
            return sex;
        }

        public void setSex(String sex) {
            this.sex = sex;
        }

        public int getAge() {
            return age;
        }

        public void setAge(int age) {
            this.age = age;
        }

    }
}

这里我们模拟了一个用户类，并使用了List作为数据源。在Servlet中，我们需要解析请求参数中的页码和每页数据数量，然后使用getPageData()方法获取数据，最后将返回结果封装为JSON格式返回给前端。

3. 前端实现

最后，我们需要使用ExtJS 2.0的相关组件来实现前端的数据显示和分页功能。

首先，我们需要编写一个data.js文件，其中包含以下代码：

Ext.onReady(function() {
    Ext.QuickTips.init();
    var pageSize = 3;
    var dataStore = new Ext.data.JsonStore({
        url: 'DataServlet',
        method: 'GET',
        root: 'data',
        fields: [{
            name: 'id',
            type: 'int'
        }, {
            name: 'name',
            type: 'string'
        }, {
            name: 'sex',
            type: 'string'
        }, {
            name: 'age',
            type: 'int'
        }],
        listeners: {
            'load': function(store, records, options) {
                var pagingBar = Ext.getCmp('pagingBar');
                if (!pagingBar) {
                    pagingBar = new Ext.PagingToolbar({
                        id: 'pagingBar',
                        pageSize: pageSize,
                        store: dataStore,
                        displayInfo: true,
                        displayMsg: '当前显示第{0}条到第{1}条记录，共{2}条记录',
                        emptyMsg: '没有记录'
                    });
                    pagingBar.doRefresh();
                } else {
                    pagingBar.store.loadData(store.reader.jsonData);
                }
            }
        },
        baseParams: {
            'page': '1',
            'limit': pageSize
        }
    });
    var columns = [{
        header: 'ID',
        dataIndex: 'id',
        width: 50
    }, {
        header: '姓名',
        dataIndex: 'name',
        width: 80
    }, {
        header: '性别',
        dataIndex: 'sex',
        width: 50
    }, {
        header: '年龄',
        dataIndex: 'age',
        width: 50
    }];
    var grid = new Ext.grid.GridPanel({
        title: '用户列表',
        store: dataStore,
        columns: columns,
        height: 200,
        renderTo: 'dataGrid'
    });
});

这段代码中，我们使用了JsonStore来获取数据，并设置了分页、查询参数和监听器，以便实现数据分页展示。在监听器中，我们使用PagingToolbar来显示分页栏信息。

最后，在data.js文件的头部加载了必要的ExtJS库和CSS文件。

至此，我们实现了一个简单的JSP和ExtJS 2.0的分页实现。

4. 示例说明

我们可以通过在浏览器中访问data.jsp文件来查看效果，如下：

http://localhost:8080/YourProjectName/data.jsp

其中YourProjectName为你的项目名称。

可以根据需要调整示例代码中的分页数量和数据列表，以适应不同的应用场景。

1. 准备工作

2. 创建JSP页面和Servlet

3. 前端实现

4. 示例说明

基础教程推荐