jquery pagination分页插件使用详解（后台struts2）

下面是jquery pagination分页插件使用详解（后台struts2）的完整攻略：

一、概述

jquery pagination是一款常用于前端数据分页的jquery插件，支持使用ajax方式加载数据，提供众多的配置项以适应不同的需求。本文将详细讲解如何在后台struts2项目中使用jquery pagination实现数据分页。

二、环境准备

使用jquery pagination需要先引入jquery及其依赖文件。在struts2项目中，我们可以通过在head.jsp文件中添加以下代码实现：

<script type="text/javascript" src="${base}/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${base}/js/jquery.pagination.js"></script>

其中，base为struts2项目中context path的简称，可以通过以下方式获取：

<c:set var="base" value="${pageContext.request.contextPath}"></c:set>

三、后台代码实现

在struts2中，我们可以通过Action类来实现数据分页的后台逻辑。以下是一个简单的Action示例：

package com.example.action;

import java.util.ArrayList;
import java.util.List;

import com.opensymphony.xwork2.ActionSupport;

public class PaginationAction extends ActionSupport {

    private int pageNumber;
    private int pageSize;
    private int total;
    private List<String> dataList;

    public String execute() {
        dataList = new ArrayList<String>();
        for (int i = (pageNumber - 1) * pageSize + 1; i <= pageNumber * pageSize; i++) {
            dataList.add("data" + i);
        }
        total = 100;
        return SUCCESS;
    }

    // getter和setter方法省略
}

在上面的示例中，我们通过传入pageNumber和pageSize参数来获取指定页数和每页显示的数据量，然后通过计算得到对应的数据列表，最后将总数据量和数据列表返回给前端。

四、前端代码实现

在前端页面中，我们需要通过调用jquery pagination的相关方法来实现分页效果。以下是一个简单的示例：

<table>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody id="dataBody"></tbody>
</table>
<div id="pagination"></div>
<script type="text/javascript">
    $(function() {
        $('#pagination').pagination({
            pageSize: 10,
            total: ${total},
            pageNumber: ${pageNumber},
            onPageClick: function(pageNumber, event) {
                $.ajax({
                    url: '<s:url action="pagination"/>',
                    data: {
                        pageNumber: pageNumber,
                        pageSize: 10
                    },
                    success: function(data) {
                        $('#dataBody').html(data);
                    }
                });
            }
        });
    });
</script>

在上面的示例中，我们首先创建一个含有一个tbody的表格用于展示数据，并创建一个id为pagination的div用于生成分页条。然后，在jquery的ready事件中注册pagination插件，并设置相关参数，其中：

pageSize指定每页显示的数据量；
total指定总数据量；
pageNumber指定当前页数；
onPageClick指定翻页时的回调函数，用于发起ajax请求获取当前页的数据并更新表格。

最后，我们在ajax请求响应成功后更新表格中的数据，并将其展示在页面上。

五、完整示例

以下是一个完整的示例项目代码：

1. JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>
<head>
    <title>Pagination Example</title>
    <script type="text/javascript" src="${base}/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="${base}/js/jquery.pagination.js"></script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody id="dataBody"></tbody>
    </table>
    <div id="pagination"></div>
    <script type="text/javascript">
        $(function() {
            $('#pagination').pagination({
                pageSize: 10,
                total: ${total},
                pageNumber: ${pageNumber},
                onPageClick: function(pageNumber, event) {
                    $.ajax({
                        url: '<s:url action="pagination"/>',
                        data: {
                            pageNumber: pageNumber,
                            pageSize: 10
                        },
                        success: function(data) {
                            $('#dataBody').html(data);
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>

2. Action类

package com.example.action;

import java.util.ArrayList;
import java.util.List;

import com.opensymphony.xwork2.ActionSupport;

public class PaginationAction extends ActionSupport {

    private int pageNumber;
    private int pageSize;
    private int total;
    private List<String> dataList;

    public String execute() {
        dataList = new ArrayList<String>();
        for (int i = (pageNumber - 1) * pageSize + 1; i <= pageNumber * pageSize; i++) {
            dataList.add("data" + i);
        }
        total = 100;
        return SUCCESS;
    }

    public int getPageNumber() {
        return pageNumber;
    }

    public void setPageNumber(int pageNumber) {
        this.pageNumber = pageNumber;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List<String> getDataList() {
        return dataList;
    }

    public void setDataList(List<String> dataList) {
        this.dataList = dataList;
    }
}

3. struts.xml文件

<!DOCTYPE struts PUBLIC 
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" 
    "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
    <constant name="struts.devMode" value="false" />
    <constant name="struts.enable.DynamicMethodInvocation" value="false" />
    <constant name="struts.mapper.alwaysSelectFullNamespace" value="false" />
    <constant name="struts.ui.theme" value="simple" />
    <constant name="struts.i18n.encoding" value="UTF-8" />
    <constant name="struts.action.excludePattern" value=".*[.]class" />

    <package name="default" namespace="/" extends="struts-default">
        <action name="pagination" class="com.example.action.PaginationAction">
            <result name="success">/pagination.jsp</result>
        </action>
    </package>
</struts>

通过以上示例，你应该已经有了一个深入理解jquery pagination分页插件的基础，可以根据自己的需求进行相关配置和修改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery pagination分页插件使用详解（后台struts2） - Python技术站