Use the VUE framework to implement the list paging function sample code and vue sample code

Use the VUE framework to implement the list paging function sample code and vue sample code

Let's take a look:

 

 

Function Description:

1. Click the page number to jump to the corresponding page;

2. Click single left/single right, and jump back/forward to a page;

3. Click double left/double right to go to the last page/first page;

4. The first three and the last three pages of the current page are displayed at a time;

5. The last page is always displayed;

HTML:

<! -- Start pagination --> <div class = "u-pages" style = "margin-bottom: 20px; margin-top: 10px; "> <ul> <li v-if =" showPre "class =" crt "> <a v-on: click =" jumpFirst (cur) "> </a> </li> <li v-if =" showPre "class =" crt "> <a v-on: click =" minus (cur) "></a> </li> <template v-for =" index in indexs "> <li class =" {classRenderer (index )}} "> <a v-on: click =" btnClick (index) ">{{ index }}</a> </li> </template> <li v-if =" showMoreTail "class =" c Rt "> .. </li> <li class = "{classRenderer (pageNo) }}"> <a @ click =" btnClick (pageNo) ">{{ pageNo }}</a> </li> <li v-if =" showTail "class =" crt "> <a v-on: click = "plus (cur)" >></a> </li> <li v-if = "showTail" class = "crt"> <a v-on: click = "jumpTail (cur)" >></a> </li> </ul> </div> <! -- End by page -->

HTML method analysis:

1,

<li class="{{classRenderer(index)}}">

The classRenderer () method enables you to click the page index and click the page to obtain the selected result.

2,

<a v-on:click="btnClick(index)" >{{index}}</a> 

The btnClick () method enables the index of the clicked page to jump to the corresponding page

ShowPre showTail

ShowPre control: Display and elimination of buttons to jump to the first page and to the previous page

Display and elimination of the buttons for showTail to jump to the last page and to the next page

Cur

Record current page number

JumpFirst (cur) minus (cur) plus (cur) jumpTail (cur)

Implement button jump function

JS:

Module. exports = {data: function () {return {cur: 1, showTail: true, showMorePre: false, showMoreTail: false, }}, methods: {jumpFirst: function (data) {var $ this = this; data = 1; $ this. cur = data; if (data = 1) {$ this. $ set ("showPre", false);} else {$ this. $ set ("showPre", true);} $ this. $ am. ajax ({url: window. $ ApiConf. api_order_detail_list, type: 'get', data: {start: 1}, success: function (data) {co Nsole. log (data); $ this. $ set ("records", data. record. records); $ this. $ set ("start", data. record. query. start); $ this. $ set ("total", data. record. query. total); $ this. $ set ("limit", data. record. query. limit) ;}}) $ this. $ set ("showTail", true); return data ;}, minus: function (data) {var $ this = this; data --; $ this. cur = data; $ this. $ set ("showTail", true); if (data = 1) {$ this. $ set ("showPre", false);} else {$ t His. $ set ("showPre", true);} $ this. $ am. ajax ({url: window. $ ApiConf. api_order_detail_list, type: 'get', data: {start: 1 + $ this. limit * (data-1)}, success: function (data) {console. log (data); $ this. $ set ("records", data. record. records); $ this. $ set ("start", data. record. query. start); $ this. $ set ("total", data. record. query. total); $ this. $ set ("limit", data. record. query. limit) ;}}) return data ;}, plus: func Tion (data) {var $ this = this; data ++; $ this. cur = data; $ this. $ set ("showPre", true); if (data = $ this. pageNo) {$ this. $ set ("showTail", false);} else {$ this. $ set ("showTail", true);} $ this. $ am. ajax ({url:/* here write your own data Request Path */, type: 'get', data: {start: 1 + $ this. limit * (data-1)}, success: function (data) {console. log (data); $ this. $ set ("records", data. record. records); $ this. $ set ("start", data. record. Query. start); $ this. $ set ("total", data. record. query. total); $ this. $ set ("limit", data. record. query. limit) ;}}) return data ;}, classRenderer: function (index) {var $ this = this; var cur = $ this. cur; if (index! = Cur) {return 'crt ';} return '';}, btnClick: function (data) {var $ this = this; if (data = 1) {$ this. $ set ("showPre", false);} else {$ this. $ set ("showPre", true);} if (data = $ this. pageNo) {$ this. $ set ("showTail", false);} else {$ this. $ set ("showTail", true);} if (data! = $ This. cur) {$ this. cur = data; $ this. $ am. ajax ({url: window. $ ApiConf. api_order_detail_list, type: 'get', data: {start: 1 + $ this. limit * (data-1)}, success: function (data) {console. log (data); $ this. $ set ("records", data. record. records); $ this. $ set ("start", data. record. query. start); $ this. $ set ("total", data. record. query. total); $ this. $ set ("limit", data. record. query. limit) ;}}}, jumpTail: function (Data) {var $ this = this; data = $ this. pageNo; $ this. cur = data; if (data = $ this. pageNo) {$ this. $ set ("showTail", false);} else {$ this. $ set ("showTail", true);} $ this. $ am. ajax ({url: window. $ ApiConf. api_order_detail_list, type: 'get', data: {start: 1 + $ this. limit * (data-1)}, success: function (data) {console. log (data); $ this. $ set ("records", data. record. records); $ this. $ set ("start", data. record. que Ry. start); $ this. $ set ("total", data. record. query. total); $ this. $ set ("limit", data. record. query. limit) ;}}) $ this. $ set ("showPre", true); return data ;}, computed: ************** * *************** // indexs: function () {var $ this = this; var ar = []; if ($ this. cur> 3) {ar. push ($ this. cur-3); ar. push ($ this. cur-2); ar. push ($ this. cur-1);} else {for (var I = 1; I <$ th Is. cur; I ++) {ar. push (I) ;}} if ($ this. cur! = $ This. pageNo) {ar. push ($ this. cur);} if ($ this. cur <($ this. pageNo-3) {ar. push ($ this. cur + 1); ar. push ($ this. cur + 2); ar. push ($ this. cur + 3); if ($ this. cur <($ this. pageNo-4) {$ this. $ set ("showMoreTail", true) ;}} else {$ this. $ set ("showMoreTail", false); for (var I = ($ this. cur + 1); I <$ this. pageNo; I ++) {ar. push (I) ;}} return ar ;} *************** ***************//}}

JS Function Analysis: indexs is used to record the total number of pages

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.