[FIXED] How can i place a newly generated pagination link data into a new div element

Issue

please i need some help on how i can append a pagination link data to the current page.

Lets say i have the following pagination links: [1][2][3] and i am currently on the page http://127.0.0.1/link?page1

I want it to be that when i click [2] the data from [2] is appended to the current page and when i click [3] the data from [3] is also append to the current page without any of the data on the current page changing.

I would also like it not to load any specific loaded page twice.

Here is what i have tried:

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

Solution

So here's an example how to generate elements from data using Vue JS. As you can see, the snippet simply generates a paragraph for each number in an array containing the numbers 1 to 20. We have two buttons to lazily load more respectively less content.

A major benefit of using Vue (or React, or Angular) is that the reactivity meachanism makes sure that changes to the model (in this case changes to page upon pressing more or less) are detected and trigger re-rendering.

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>

Answered By - FK82

Answer Checked By - Senaida (PHPFixing Volunteer)