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）的主要好处是reactivity机制确保了对模型的更改（在这种情况下，按 more会更改为page < / em>或 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>

我如何将新生成的分页链接数据放入新的div元素中

1 个答案: