Vue. js table paging ajax asynchronously loads data, vue. jsajax

Vue. js table paging ajax asynchronously loads data, vue. jsajax

Vue. js is a lightweight, high-performance, componentized MVVM library with easy-to-use APIs.

Paging is generally used together with a table. A paging link is used as a part of a table. It is reasonable to encapsulate a paging link into an independent component and then embed it into a table component as a child component.

1. Register a component

Js

Vue. component ('pagination', {template: '# paginationTpl', replace: true, props: ['cur', 'all', 'pagenum'], methods: {// page number Click Event btnClick: function (index) {if (index! = This. cur) {this. cur = index }}, watch: {"cur": function (val, oldVal) {this. $ dispatch ('page-to ', val) }}, computed: {indexes: function () {var list = [] // calculate the left and right page number var mid = parseInt (this. pageNum/2); // The median value var left = this. cur-mid; var right = Math. max (this. cur + this. pageNum-mid-1, this. pageNum); if (left <1) {left = 1} if (right> this. all) {right = this. all} while (left <= right) {list. push (left) left ++} return list;}, showLast: function () {if (this. cur = this. all) {return false} return true}, showFirst: function () {if (this. cur = 1) {return false} return true }}});

Template:

<Script type = "text/template" id = "paginationTpl"> <nav v-if = "all> 1"> <ul class = "pagination"> <li v-if = "showFirst"> <a href = "javascript: "@ click =" cur -- "> «</a> </li> <li v-for =" index in indexes ": class =" {'activity ': cur = index} "> <a @ click =" btnClick (index) "href =" javascript: ">{{ index }}</a> </li> <li v-if =" showLast "> <a @ click =" cur ++ "href =" javascript: ">» </a> </li> <a> total <I >{{ all }}</I> pages </a> </li> </ul> </nav> </script>

HTML:

<div id='parentEle'>...<pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination></div>

When the paging link is clicked

Page-

Event, and we specify the parent component in the html Tag

LoadList

To handle events, you only need to pass the current page number to the parent component. The parent component loads data in ajax and updates its pageAll value.