_javascript technique of paging component based on VUEJS framework

Turning the page function on the front end is a problem ah! I finally stepped on it today! Ha ha! Sorting out the method, I was based on Vuejs write, the same applies to angular ha!

Package Download Address: Vue.js Paging component

Screenshot of Effect:

Overall implementation logic, when the user clicks the page number, Ajax gets the data from the backend, including: Records (the current page query to the record), totalrecords:121 (All Records), CurrentPage (current page number), Totalpage (Total page), Size (The current page displays the number), and then use the algorithm I encapsulated to assemblepageturnerparams the page to show which page number.

Have to say, I consider very comprehensive ha!! When the number of page numbers shows ellipses, when the number is less, the display is less!

The source code is as follows:

Html

<! DOCTYPE html>  

Vue

Ajax returns JSON//{"status": True, "MSG": "OK", "data": {"accidentlist": [{"token": "mw==", "accidentstatus": "Triggered", "" Endtime ":"------------"," Continuetime ":"------------"," Accidentstatusfriend ":" \u5f85\u63a5\u624b "," id ":" 3 "," EnId ":" One "," Currentlevelnum ":" 0 "," curduty ": [{" id ":" 4420 "," name ":" Zhaopeng1 "," type ":" Member "}]," Curpolicyid ":" 2 "," Createtime ":" 2016-08-24 15:43:10 "," description ":" {\ level\ ": 1,\" genre\ ": 2,\" from\ ": \" 10.103.11.21\ "," info\ " : \ "Xx\u786c\u4ef6fail\", \ "detail\": \ "Xx\u786c\u4ef6fail\u53ef\u80fd\u7684\u539f\u56e0\u662fxxx\uff0c\u5efa\ U8baexxx\ "}", "Level": 1, "Genre": 2, "from": "10.103.11.21", "info": "Xx\u786c\u4ef6fail", "ServiceName": "Ceshi"},{" Token ":" mg== "," accidentstatus ":" Triggered "," Endtime ":"------------"," Continuetime ":"------------"," Accidentstatusfriend ":" \u5f85\u63a5\u624b "," id ":" 2 "," EnId ":" Ten "," Currentlevelnum ":" 0 "," curduty ": [{" id ":" 4420 ", "Name": "Zhaopeng1", "type": "Member"}, "Curpolicyid": "2", "Createtime": "2016-08-24 15:43:07", "description": "{\" Level\ ": 1,\" genre\ ": 2,\" frOm\ ": \ 10.103.11.21\", \ "info\": \ "xx\u786c\u4ef6fail\", \ "detail\": \ "xx\u786c\u4ef6fail\u53ef\u80fd\u7684\u539f\ U56e0\u662fxxx\uff0c\u5efa\u8baexxx\ "}", "Level": 1, "Genre": 2, "from": "10.103.11.21", "info": "Xx\u786c\u4ef6fail", "ServiceName": "Ceshi"},{"token": "mq==", "accidentstatus": "Triggered", "Endtime": "------------", "Continuetime": "- -----------"," Accidentstatusfriend ":" \u5f85\u63a5\u624b "," id ":" 1 "," EnId ":" 9 "," Currentlevelnum ":" 0 "," curduty ": [{ "id": "4420", "name": "Zhaopeng1", "type": "Member"}], "Curpolicyid": "1", "Createtime": "2016-08-24 15:31:59", " Description ":" {\ "level\": 1,\ "genre\": 2,\ "from\": \ "10.103.11.21\", \ "info\": \ "xx\u786c\u4ef6fail\", \ "detail\": \ " Xx\u786c\u4ef6fail\u53ef\u80fd\u7684\u539f\u56e0\u662fxxx\uff0c\u5efa\u8baexxx\ "}", "Level": 1, "Genre": 2, "from": "10.103.11.21", "info": "Xx\u786c\u4ef6fail", "ServiceName": "Nimi"}], "Pageparams": {"records": "A", "totalrecords": "121", "CurrentPage": "2", "Totalpage": "A", "Size": 12}}//Top 4 properties are returned in the background, front end calculation displaypagelist Display list var Pageturnerdefaultparams ={records:9, totalrecords:121, Currentpage:1, Totalpage:1, Size:12, displaypagelist: [3,4,5,6,7]}; 
 var assemblepageturnerparams = function (records,totalrecords,currentpage,totalpage,size) {var records = records; 
 var totalrecords = totalrecords; 
 var currentpage = currentpage; 
 var totalpage = totalpage; 
 var size = size; 
 
 var displaypagelist = []; var firstpage = '//page first page if (currentpage<1) {Console.log (' is already the first page!! ' currentpage = 1}//Last Flip page else if (currentpage>totalpage) {Console.log (' already the last page!! ') currentpage = totalpage}//Total pages less than 7 pages if (totalpage<7) {console.log (' total pages less than 7 pages! ')//console.log (' Total pages: ' + totalpage) for (var j=2 j<=totalpage; J + +) {//console.log (j) Displaypagelist.push ( The total number of pages is greater than or equal to 7 pages else{console.log (' Total pages are greater than or equal to 7 pages! ') if (currentpage<5) {console.log (' clicked page less than 5 ') FirstPage = 2}/else if (currentpage<6) {//console. Log (' clicked on page less than 6 ')//FirstPage = 3//} 
 else if (currentpage>totalpage-3) {console.log (' clicked page number is greater than total page number-3 off ') FirstPage = totalPage-5} else{FIRSTP 
 age = currentPage-2; for (var i=firstpage i<firstpage+5; i++) {Displaypagelist.push (i)}} var params = {Records:recor DS, Totalrecords:totalrecords, Currentpage:currentpage, Totalpage:totalpage, Size:size, Displaypagelist:dis 
 
Playpagelist} return params}; var pageturnercontroller = new Vue ({el: '. myApp ', data: {pageturner:pageturnerdefaultparams}, Ready:functio N () {////First query Delivery query first page and pagesize this.querydata (1)}, methods: {querydata:function (page) {//do ajax here// Gets the records totalrecords totalpage size from the background and the Assemble method calculates all paging-related parameter//assemblepageturnerparams 4 parameters records Totalre Cords page totalpage pageSize this.pageturner = Assemblepageturnerparams (11,121,page,10,12) Console.log (Json.stringi FY (This.pageturner)) Console.log (' Jump to ' + This.pageTurner.currentPage)}}
}); 

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.