json实现jsp分页实例介绍(附效果图)

下面就来详细讲解一下“json实现jsp分页实例介绍(附效果图)”的完整攻略。

1. 基本介绍

这个示例主要是基于jsp和json技术实现的分页功能。通过jsp实现数据的展示以及分页的管理，通过json来实现前后台数据的交互，即ajax异步刷新数据，实现页面的无刷新分页。

2. 具体步骤

2.1 实现数据的获取和展示

首先，我们需要在jsp页面中实现数据的获取和展示。这里可以通过后端的Java程序获取数据库中的数据，然后在jsp页面中进行展示。具体实现步骤可以参考以下示例：

<%@ page contentType="text/html; charset=UTF-8" language="java" import="java.util.*,com.alibaba.fastjson.*" %>
<%@ page import="javax.servlet.http.*,java.io.*" %>
<%
    // 获取传递参数
    String page = request.getParameter("page");
    String size = request.getParameter("size");

    // 假设数据存储在List集合中
    List<Map<String, Object>> dataList = new ArrayList<Map<String, Object>>();
    // 这里可以通过后台程序从数据库中查询数据并存储到dataList集合中

    // 计算分页数据
    int total = dataList.size();
    int start = (Integer.parseInt(page) - 1) * Integer.parseInt(size);
    int end = start + Integer.parseInt(size);
    if (end > total) {
        end = total;
    }

    // 构建分页数据
    List<Map<String, Object>> pageList = new ArrayList<Map<String, Object>>();
    for (int i = start; i < end; i++) {
        pageList.add(dataList.get(i));
    }

    // 将分页数据以json格式输出到前端页面
    PrintWriter out = response.getWriter();
    JSONObject jsonObj = new JSONObject();
    jsonObj.put("total", total);
    jsonObj.put("rows", pageList);
    out.print(jsonObj.toJSONString());
%>

上述代码中，我们获取了前端传递过来的分页参数，并从数据库中查询出相应的数据。然后进行分页计算，构建分页数据，并将分页数据以json格式输出到前端页面，这里使用了com.alibaba.fastjson包来实现json数据的构建。

2.2 实现前后台的数据交互

接下来，我们需要使用ajax实现前后台的数据交互，实现页面的无刷新分页。具体实现步骤可以参考以下示例：

function loadData() {
    $('#dg').datagrid({
        url: 'data.jsp?page=' + $('#page').textbox('getValue') + '&size=' + $('#size').textbox('getValue'),
        method: 'get',
        pagination: true,
        pageSize: $('#size').textbox('getValue'),
        pageList: ['10', '20', '30'],
        columns: [[
            {field:'id', title:'ID', width:100},
            {field:'name', title:'Name', width:100},
            {field:'age', title:'Age', width:100}
        ]],
        onLoadSuccess: function(data) {
            var pager = $('#dg').datagrid('getPager');
            $(pager).pagination({
                total:data.total,
                pageNumber:$('#page').textbox('getValue')
            });
        }
    });
}

上述代码中，我们通过datagrid插件实现了页面数据的展示，并使用ajax获取分页数据。在获取数据时，我们将分页参数加入到url中，后端程序根据这些参数进行分页数据的计算和输出。然后，在数据加载成功后，我们获取分页数据的总数，并动态地更新分页控件的总数和页码。

3. 示例说明

3.1 示例1

假设我们需要实现一个用户信息管理页面，其中需要分页展示用户的姓名和年龄信息，我们可以按照以下步骤实现：

1. 在后端程序中，从数据库中查询出用户信息，并将其存储到List集合中。
2. 在jsp页面中，使用ajax异步地获取用户信息，并进行分页展示。
3. 在页面加载成功后，动态地更新分页控件的总数和页码。

3.2 示例2

假设我们的网站需要分页展示新闻信息，其中需要展示新闻标题、作者、发布时间等信息，我们可以按照以下步骤实现：

1. 在后端程序中，从数据库中查询出新闻信息，并将其存储到List集合中。
2. 在jsp页面中，使用ajax异步地获取新闻信息，并进行分页展示。
3. 在页面加载成功后，动态地更新分页控件的总数和页码。