使用 JS/jQuery/AJAX 和控制器在 Java 中分页

Question

我有这样的问题：我需要在 jsp 上实现分页。我正在使用 jQuery DataTable，但我想有自己的分页。我有 return 我的页面控制器和 return 我的数据库中元素数量的控制器。

@RequestMapping(value = "/all-events", params = { "page", "size" }, method = RequestMethod.GET, produces = "application/json")
public @ResponseBody List<EventDto> getAllEventsPaging(
        @RequestParam(value = "page") Integer page,
        @RequestParam(value = "size") Integer size) {
    List<EventDto> events = eventService.getAllEventsPaging(page, size);
    return events;
}

@RequestMapping(value = "/paging",  method = RequestMethod.GET)
public String getAllEventsPaging(@RequestParam("size") Long size,Model model) {
    Long dataBaseSize = eventRepository.count();
    Long amount;
    if (dataBaseSize % size == 0){
        amount = dataBaseSize % size;
    } else{
        amount = dataBaseSize % size + 1;
    }
    model.addAttribute("amount", amount);
    return "amount";
}

然后我有构建 table:

的 js 文件

$(document)
    .ready(
            function() {
                size = $(
                        "#request_table_obtain_length option:selected")
                        .val();
                table = $("table.table-bordered")
                        .dataTable(
                                {
                                    "sAjaxDataProp" : "",
                                    "fnInitComplete" : function(settings,
                                            json) {
                                    },
                                    "fnRowCallback" : function(nRow, aData,
                                            iDisplayIndex,
                                            iDisplayIndexFull) {
                                        var ul = $("<ul/>", {
                                            'class' : "dropdown-menu"
                                        });
                                        var li = $("<li/>");
                                        var div = $("<div/>", {
                                            "class" : "input-group-btn"
                                        });
                                    },


                                    "bProcessing" : false,
                                    "bServerSide" : false,
                                    "bPaginate" : false,
                                    "bFilter" : false,
                                    "bInfo" : false,
                                    "sAjaxSource" : "all-events?page="
                                            + page + "&size=" + size,
                                    "aoColumns" : [
                                            {
                                                "mData" : function(data,
                                                        type, full) {
                                                    return '<a href=event?id='
                                                            + data.id
                                                            + '>'
                                                            + data.name
                                                            + '</a>';
                                                }

                                            },
                                            {
                                                "mData" : "startDate",
                                                "mRender" : function(data,
                                                        type, full) {
                                                    return new Date(data)
                                                            .toLocaleString()
                                                            .split(" ")[0];
                                                }
                                            },
                                            {
                                                "mData" : function(data,
                                                        type, full) {
                                                    return data.city.city
                                                            + ", "
                                                            + data.address;
                                                }
                                            },
                                            {
                                                "mData" : "priceCategory",
                                                "mRender" : function(data,
                                                        type, full) {
                                                    return data.priceCategory;
                                                }
                                            },
                                            {
                                                "mData" : "website"
                                            },
                                            {
                                                "mData" : function(data,
                                                        type, full) {
                                                    return data.owner.firstName
                                                            + " "
                                                            + data.owner.lastName;
                                                }
                                            } ]
                                });
                table
                        .on(
                                'draw',
                                function() {
                                    if (table.fnSettings().sAjaxSource
                                            .indexOf("all-events") > -1) {
                                        $(
                                                '.dropdown-menu>li>a:contains("Reject"),a:contains("Approve")')
                                                .hide();
                                    } else {
                                        $(
                                                '.dropdown-menu>li>a:contains("Refuse"),a:contains("Send Again")')
                                                .hide();
                                    }
                                });
                $("#request_table_obtain_length > label > select").change(
                        function() {
                            size = $(this).val();
                            showEvents();

                        });
            });

在我的 jsp 上，我有一个下拉菜单，可以帮助我选择我想在页面上看到多少元素。我接受这个参数（大小）并将它发送给我请求两个参数的控制器。主要问题是我应该如何在 jsp 上构建分页字段，以及如何将第二个参数发送到控制器（可能使用 ajax 或 jQuery）。带有分页和下拉菜单的 jsp 片段如下所示：

<div class="box-body table-responsive">
            <select id="request_table_obtain_length" class="dataTableDropDown">
                <option selected="selected" value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            <table id="request_table_obtain"
                class="table table-bordered table-striped">

                <thead>
                    <tr>
                        <th><spring:message code="label.eventTitle" /></th>
                        <th><spring:message code="label.startDate" /></th>
                        <th><spring:message code="label.location" /></th>
                        <th><spring:message code="label.price" /></th>
                        <th><spring:message code="label.website" /></th>
                        <th><spring:message code="label.organizer" /></th>
                    </tr>
                </thead>
            </table>
            <div class="box-footer clearfix">
                <ul class="pagination pagination-sm no-margin pull-right">
                    <li><a href="#">«</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">»</a></li>
                </ul>
            </div>
        </div>

Answer 1

您需要跟踪记录显示的页面。您还需要用于上一页和下一页的导航按钮（或链接）。

如果有更多记录要显示，将显示“下一步”按钮。单击此按钮后，您将发送 ajax 下一页请求。

如果当前页面不是第一页，将显示上一页按钮。单击此按钮后，您将发送 ajax 请求上一页。

最终您可以将加载的记录存储在本地数组中，并引用它们而不是每次为已访问的页面调用服务器。

我已经在类似 post.

中展示了此功能的代码

使用 JS/jQuery/AJAX 和控制器在 Java 中分页

Pagination in Java using JS/jQuery/AJAX and controllers

javascript

java

jquery

spring

pagination