Paginierung in Java mit JS/jQuery/AJAX-und-Controller

Habe ich das Problem: ich brauche zur Umsetzung der Paginierung auf meine jsp. Ich bin mit der jQuery-DataTable, aber ich will meine eigene Paginierung. Ich habe die controller, return-mich-Seite und-controller, der gibt mir die Anzahl der Elemente in der DB.

@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";
}

Dann habe ich die js-Datei, die den Aufbau der Tabelle:

$(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();

                        });
            });

Auf meiner jsp habe ich drop-down-Menü, das hilft mir, mich zu entscheiden, wie viele Elemente die ich sehen wollen, auf der Seite. Ich nehme diese parameter (Größe) und es mir schicken-controller, der die Anfragen auf zwei Parameter. Das Hauptproblem ist, wie soll ich bauen, paging-Bereich auf jsp-und wie der zweite Parameter sollte gesendet werden, um controller (vielleicht mit der Nutzung von ajax oder jQuery). Fragment von jsp mit paging und drop-down-Menü wie folgt Aussehen:

<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>