Javascript vue.js表格分页，ajax异步加载数据

三、Ajax 异步数据加载

在现代 Web 应用中，Ajax 异步加载数据是一种常见的技术。它允许我们在不刷新页面的情况下获取和更新数据，提高了应用的响应速度和用户体验。在 Vue.js 中，你可以使用 axios 或 fetch API 等工具进行 Ajax 请求。

在Vue框架中，我们注册了一个名为'pagination'的组件，它采用js进行编写。这个组件的主要功能是实现网页的分页导航。它的模板部分使用特定的HTML结构来展示页码，同时拥有一些特定的属性和方法。

组件代码

Vueponent('pagination', {

template: 'paginationTpl', //引用id为paginationTpl的模板

replace: true, //替换元素

props: ['cur', 'all', 'pageNum'], //接收父组件传递的cur、all、pageNum三个属性

methods: {

btnClick: function(index) { //定义页码点击事件

if (index !== this.cur) { //如果点击的页码不是当前页码

this.cur = index; //更新当前页码

}

}

},

watch: {

"cur": function(val) { //监听cur的变化

this.$dispatch('page-to', val); //当cur变化时，触发page-to事件并传递新的页码值

}

},

computed: { //定义计算属性

indexes() { //计算需要展示的页码列表

let list = [];

let mid = parseInt(this.pageNum / 2); //计算中间页码位置

let left = Math.max(this.cur - mid, 1); //计算左侧起始页码

let right = Math.max(this.cur + this.pageNum - mid - 1, this.pageNum); //计算右侧结束页码，但不超出总页数

if (right > this.all) { right = this.all; } //如果右侧页码超过总页数，则调整右侧页码为总页数

while (left <= right) { //循环添加页码到列表中

list.push(left);

left++; //更新左侧页码

}

return list; //返回页码列表

},

showLast() { //判断是否显示最后一页的链接

return this.cur !== this.all; //如果当前页码不是最后一页，则返回true，显示链接

},

showFirst() { //判断是否显示第一页的链接

return this.cur !== 1; //如果当前页码不是第一页，则返回true，显示链接

}

}

});

模板部分

=====================

我们创建一个Vue实例，指定要操作的DOM元素为"item_list"。我们的数据部分包括两个数组：一个是用于存储数据的`items`，另一个是用于分页的`pageAll`和`perPage`。

这个Vue实例有一些方法。其中，`loadList`方法用于从服务器获取数据。我们通过$.ajax发起一个POST请求到"/getList"，并传入当前的页码和每页的数量。如果请求成功并且返回的数据状态为1，我们就更新我们的`items`数组，并更新每页的数量和总页数。

在`init`方法中，我们调用`loadList`方法，传入1作为初始页码，以开始加载数据。

一旦这个Vue实例被创建并初始化，它就会向服务器请求数据，并在页面上显示。

注：此代码基于Vue框架和一些常用的JavaScript库（如jQuery）编写，确保你的项目已经引入了这些依赖才能正常运行。