Разбивка: как загрузить первую страницу с AJAX

Я пишу заявление онлайн покупок с использованием Struts 2.Разбивка: как загрузить первую страницу с AJAX

В переднем конце я использую JSP, Twitter Bootstrap, JQuery, moustache.js шаблон, twbs pagination plugin и некоторые JavaScript.

У меня есть объект продукта, и я хочу отобразить список продуктов для пользователя на странице jsp.

Способ, которым я занимаюсь, это асинхронная страница загрузки с номером исправления (20) продуктов в формате json, а затем получение их с использованием шаблона усов.

Весь мой код работает, за исключением тех случаев, когда пользователь впервые видит эту страницу jsp - первые 20 продуктов не отображаются. Поэтому, когда я перехожу со страницы на страницу, он загружает информацию, но поскольку twbs plugin работает через события об обстреле, это означает, что событие не запускается после загрузки первой страницы jsp.

Так что мой вопрос - это действительно хороший способ исправить это?

Должен ли я запускать мероприятие один раз или использовать $(document).ready() или $(document).onload()?

Я не специалист в JavaScript, поэтому, пожалуйста, будьте терпеливы

<html> 
<%@ include file="/WEB-INF/jspf/head.jspf"%> 
<body> 
    <%@ include file="/WEB-INF/jspf/menu.jspf"%> 
    <div class="container"> 
     <ul class="sync-pagination pagination"></ul> 
     <div id="products" style="width: 50%"></div> 
     <ul class="sync-pagination pagination"></ul> 
    </div> 

    <script type="text/javascript" 
     src="webjars/mustachejs/0.8.2/mustache.js"></script> 
    <script id="products-template" type="text/mustache-template"> 
<ul class="list-group"> 
{{#.}} 
    <li class="list-group-item"> 
     <label for="{{name}}">Name: /label> {{name}} 
</br> 
     <label for="{{price}}">Price: </label> {{price}} 
</br> 
<a href="product/view?id={{id}}">Full description...</a> 
    </li> 
{{/.}} 
</ul> 
    </script> 

    <script type="text/javascript" 
     src="script/jquery.twbsPagination.min.js"></script> 
    <script type="text/javascript"> 
     var records = "${requestScope.records}"; 
     var recordsPerPage = 20; 
     var pages = Math.ceil(records/recordsPerPage); 
     $('.sync-pagination').twbsPagination({ 
      totalPages : pages, 
      visiblePages : 7, 
      onPageClick : function(event, page) { 
       $('#products').html(changePage(page)); 
      } 
     }); 

     function changePage(page) { 
      pnumber = page || 1; 

      $.ajax({ 
       type : 'GET', 
       dataType : 'json', 
       url : 'product/upload_products?page=' + pnumber, 
       success : function(products) { 
        var template = $('#products-template').html(); 
        var info = Mustache.render(template, products); 
        $('#products').html(info); 
       } 
      }) 
     } 
    </script> 
</body> 
</html>

источник

2015-04-08 marknorkin

Вы должны вызвать changePage(); на начальной загрузки. Вы также можете назвать это когда страница загрузится все с помощью $(document).ready();

<script type="text/javascript"> 
 
     var records = "${requestScope.records}"; 
 
     var recordsPerPage = 20; 
 
     var pages = Math.ceil(records/recordsPerPage); 
 
     $('.sync-pagination').twbsPagination({ 
 
      totalPages : pages, 
 
      visiblePages : 7, 
 
      onPageClick : function(event, page) { 
 
       $('#products').html(changePage(page)); 
 
      } 
 
     }); 
 

 
     function changePage(page) { 
 
      pnumber = page || 1; 
 

 
      $.ajax({ 
 
       type : 'GET', 
 
       dataType : 'json', 
 
       url : 'product/upload_products?page=' + pnumber, 
 
       success : function(products) { 
 
        var template = $('#products-template').html(); 
 
        var info = Mustache.render(template, products); 
 
        $('#products').html(info); 
 
       } 
 
      }) 
 
     } 
 
    
 
     //Add this in here 
 
     changePage(); 
 
    </script>

источник

2015-04-08 19:15:24 honerlawd

да, это сработало. Спасибо ! решение действительно просто – marknorkin

@Honerlawd. может ли он работать над прокруткой. означает автоматический загрузочный продукт после прокрутки. –

Разбивка: как загрузить первую страницу с AJAX

ответ

Смежные вопросы