Как я могу поместить недавно сгенерированные данные ссылки на пагинацию в новый элемент div

Question

пожалуйста, мне нужна помощь в том, как я могу добавить данные о ссылках на нумерацию страниц на текущую страницу.

Допустим, у меня есть следующие ссылки на страницы: [1] [2] [3] и сейчас яна странице http://127.0.0.1/link?page1

Я хочу, чтобы при нажатии [2] данные из [2] добавлялись к текущей странице, а когда я нажимал [3], данные из [3]также добавить к текущей странице без каких-либо изменений данных на текущей странице.

Я также хотел бы, чтобы она не загружала какую-либо конкретную загруженную страницу дважды.

Вот что я пробовал:

$(document).on('click', '.pagination a', function(e) {
    e.preventDefault();

    var page = $(this).attr('href');
    getOffersPage(page);

    function getOffersPage(page) {
        if (page === page) {
            var resultSection = $('#new-result');
            $('.appended-data').load(page + ' #new-result', function() {
                $('#paginated-links').addClass('text-right x1-margin-top');
            });
        }
    }
});

Answer 1

Итак, вот пример того, как генерировать элементы из данных, используя Vue JS.Как видите, фрагмент просто генерирует абзац для каждого числа в массиве, содержащем числа от 1 до 20. У нас есть две кнопки, чтобы лениво загружать больше или меньше контента.

Основным преимуществом использования Vue (или React, или Angular) является то, что механизм реактивности гарантирует, что изменения в модели (в этом случае изменятся на page при нажатии * 1006)* more или less ) обнаруживаются и запускают повторный рендеринг.

const items = []
for (i = 1; i <= 20; i++) {
  items[i - 1] = i
}

new Vue({
  el: '#lazy-load-example',
  data: {
    items,
    page: 1,
    pageSize: 5,
  },
  methods: {
    itemsForPage() {
      const N = this.page * this.pageSize
      return this.items.slice(0, Math.min(N, this.items.length))
    },
    onMore() {
      const N = this.Page * this.pageSize
      if (this.hasMore()) {
        this.page++
      }
    },
    onLess() {
      if (this.page > 1) {
        this.page--
      }
    },
    hasMore() {
      return this.page < this.items.length / this.pageSize;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    .as-console-wrapper { display: none !important; }
</style>

<div class="card d-flex flex-column" id="lazy-load-example">
  <div class="card-body d-flex flex-column justify-content-between">
    <h2 class="card-title">Lazy Load Example</h2>
    <div class="col-12"><p v-for="item in itemsForPage()" class="col-3">item: {{ item }} </p></div>
  </div>
  <div class="card-footer d-flex">
    <div class="mr-2"><button class="btn btn-primary" :disabled="page === 1"  v-on:click="onLess">Less</button></div>
    <div><button class="btn btn-primary" :disabled="!hasMore()"  v-on:click="onMore">More</button></div>
  </div>
</div>