Question

我正在实施分页。

GET     /profile/:id           controllers.Application.profile(id : Int)

我有一个项目列表，每页只显示5个项目。例如路线

localhost:9000/profile/1

我加载前5个项目，依此类推。问题是我在页面上有4个部分用分页，所以我需要转到下一页而不重新加载页面，以便将其他部分保留在它们当前的页面上。这该怎么做？我是Ajax和jQuery的新手。我将项目和项目的数量传递给此视图。

 @for(event <- eventsCreated) {
                <div class="my-event">


                    @if(event.eventPhoto != ""){
                        <img src="@{"/image"}?image=@event.eventPhoto" height=200 width=300 class="img-responsive my-event-photo">
                    }else{
                        <img src="@routes.Assets.at("assets/icons/Forma-3.png")" class="img-responsive my-event-photo">
                    }

                    <div class="my-event-details">
                        <p><a href='@{"/events/details/"}@event.eventId'>@event.eventName</a></p>
                        <p>@event.eventDescription</p>
                        <i class="flaticon-location"></i><i class="flaticon-thumbs1"></i>
                    </div>
                </div>
            }


        <!-- bootstrap pagination -->
        <nav aria-label="Page">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>



   <!-- here I tried to do this by myself but it does nothing -->

             <li class="page-item"><a class="page-link" href="" onclick="Profile()">2</a></li>

   <!-- ============================================= -->

                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                </ul>
        </nav>

这是我的剧本：

<script type="text/javascript">
function Profile($scope, $http) {

    $.ajax({
        type: 'GET',
        url: '/profile/2',
        data: {},
        dataType: 'json',
        success: function(d){
            alert(d.status);
        }
    });
}

如果此信息很重要，我使用的是play2 framework

AJAX jQUERY初学者。在没有页面重新加载的情况下获取分页请求

0 个答案: