HTML+VUE paging to achieve cool IoT large screen function

Effect

text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEwNjMzNA==,size_16,color_FFFFFF,t_70)

demo.html

<html>
	<head>
		<meta charset="UTF-8">
		<title>Data screen</title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="js/axios.min.js"></script>
		<script type="text/javascript" src="js/babel.min.js"></script>

		<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>


	</head>
	<body>
		<header>
			IoT platform data statistics page
			<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
		</header>
		<div id="page">
			<div class="center_bot">
				<table class="panel-table" bordercolor="#0d48e0" border="1">
					<thead bgcolor="#0e4ae0" align="center">
						<tr height="40">
							<th colspan="6"><img src="images/icon04.png" /> Monitoring List</th>
						</tr>
					</thead>
					<tbody>
						<tr class="aaa" align="center">
							<td v-for="item in factoryHeader" style="color: #00fcff; font-size: 18px; padding: 5px 0;">{{ item.categories }}</td>
						</tr>
						<div height="168px">
						<tr v-for="point in factory" :key="point.pointId" class="aaa" style="font-size: 16px;" align="center">
							<td>{{point.enterpriseName}}</td>
							<td>{{point.pointName}}</td>
							<td>
								<div v-if="point.isErrorType==0">None</div>
								<div v-if="point.isErrorType==1"><a style="color: #FF6F05;">Broken line</div>
								<div v-if="point.isErrorType==2"><a style="color:#FF0000 ;">Exceeding the standard</div>
								<div v-if="point.isErrorType==3"><a style="color:#FF6F05 ;">Exception</div>
								<div v-if="point.isErrorType==4"><a style="color: #00F6FF;">Normal</a></div>
							</td>
							<td width="250">
								<button class="b1 click_pop" @click="goWarnData(point.pointId)">Exceeding standard data</button>
								<button class="b2 click_pop2" @click="goExceptionData(point.pointId)">Exception data</button>
								<button class="b3 click_pop3" @click="goDataDetail(point.pointId)">Historical data</button>
							</td>
						</tr>
			</div>
			
					</tbody>
			
				</table>
				<!-- <div class="box">
					<div id="pagination" class="page fl"></div>
				</div> -->
				<div style="margin:0 auto;text-align:center">
				      <a @click="prevPage()">Previous page</a>
				      <div style="display: inline-block;margin-left: 10px" v-for="index of pagelist" :key="index">
				        <button :class="{active: currentPage == activatePage + index - 1}" @click="selectPage($event,index)">{{activatePage + index -1}}</button>
				      </div>
				      <span >Page {{pageIndex}} / Total {{totalPage}} Pages Total {{total}} Items</span>
				      <a @click="nextPage($event)">Next page</a>
				</div>
			</div>
		</div>	
		<script>
			$(document).ready(function() {
				$('.pop-close').click(function() {
					$('.bgPop3,.pop3').hide();
				});
				// $('.click_pop3').click(function() {
				// $('.bgPop3,.pop3').show();
				// });
			})
		</script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/map.js"></script>
		<script type="text/javascript" src="js/times.js"></script>
		<script type="text/javascript" src="js/DTU.js"></script>
		<script type="text/javascript" src="js/PLC.js"></script>
		<script type="text/javascript" src="js/online.js"></script>
		<script type="text/javascript" src="js/industry.js"></script>
		<script type="text/javascript" src="js/data.js"></script>
<!-- <script type="text/javascript" src="js/index.js"></script> -->
		<script type="text/javascript" src="js/history.js"></script>
		<script type="text/javascript" src="js/warn.js"></script>
	    <script type="text/javascript" src="js/page.js"></script>
	</body>
</html>

page.js

var page_data = {
	key: null,
	pointId: null,

	limit: 6,
	total: 0, //Total number of entries pageIndex: 1, //Page x totalPage: 0, //Total number of pages,
	activatePage: 1, //The default activation page is 1
	currentPage: 1, //Current page number, default is 1
	pagelist: 7, //Number of paging buttons pageSize: 10, //Number of buttons to display per page mid: 3, //Click the button and the paging button will be re-rendered in the center of pagelist/2 factoryHeader: [{
			"categories": "Site Name"
		},
		{
			"categories": "Company Name"
		},
		{
			"categories": "Status"
		},
		{
			"categories": "Operation"
		}
	],
	factory: [],
	timer: null //timer};

var page_vue = new Vue({
	el: '#page',
	data: page_data,
	beforeCreate: () => {
		// this.send();

		console.log("page_data before creation")
	},
	created: () => {


		// this.dtu();
		console.log("Creating page_data")
	},
	beforeMount: () => {

	},
	mounted() {
		this.timer = setInterval(() => {
			setTimeout(this.getCurrentPageData(), 0)
		}, 1000 * 10)

		console.log("Mounting completed page_data:");

	},
	beforeUpdate() {


		console.log('= will update and render page_data=');
	},
	destroyed() {
		clearInterval(this.timer);
		this.timer = null;
	},
	watch: {},
	methods: {

		/* Monitoring list */
		getCurrentPageData: function() {
			axios({
					headers: {
						'Content-Type': 'application/json'
					},
					async: true,
					method: 'post',
					url: 'https://www.shbykj.top/bi/monitor/data',
					data: {
						'page': page_vue.$data.currentPage,
						'limit': page_vue.$data.limit,
					}
				})
				.then(function(res) {
					console.log(res.data.data);
					if (res.data.data) {
						page_vue.$data.factory = res.data.data.data
						page_vue.$data.total = res.data.data.total

						console.log(".this.total" + page_vue.$data.total)
						let begin = (page_vue.$data.currentPage - 1) * page_vue.$data.pageSize;
						let end = page_vue.$data.currentPage * page_vue.$data.pageSize;
						this.mid = Math.floor(page_vue.$data.pagelist / 2);
						//DIY request data here console.log("dataListLength total number of items::::::" + page_vue.$data.total)

						console.log("pageSizeNumber of entries per page::::::" + page_vue.$data.limit)
						//Total number of pages page_vue.$data.totalPage = page_vue.$data.total % page_vue.$data.limit == 0 ? page_vue.$data.total / page_vue
							.$data.limit : Math.floor(page_vue.$data.total /
								page_vue.$data.limit) + 1
						console.log("totalPage total number of pages: " + page_vue.$data.totalPage)
					}
				})
				.catch(function(error) {
					console.log("Large screen monitoring list query exception" + error);

				});
		},

		// Set the current page data, the interception rules for array operations are [0~9], [10~20]...,
		// When currentPage is 1, we display (0*pageSize+1)-1*pageSize, when currentPage is 2, we display (1*pageSize+1)-2*pageSize...



		//Previous page prevPage() {
			console.log(this.currentPage);
			if (this.currentPage === 1) {
				return false;
			} else {
				this.currentPage--;
				if (this.activatePage !== 1) {
					if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
						this.activatePage = this.currentPage - this.mid;
					}
				}

				this.getCurrentPageData();
			}
		},
		// Next page nextPage() {

			if (this.currentPage === this.totalPage) {
				return false;
			} else {
				if (this.activatePage !== this.totalPage - this.pagelist + 1) {
					if (this.currentPage >= (this.pagelist - this.mid)) {
						this.activatePage = this.currentPage - this.mid + 1;
					}
				}
				this.currentPage++;

				this.getCurrentPageData();
			}
		},
		selectPage(event, msg) {
			//Calculate whether to move forward or backward let gap = (this.activatePage + msg - 1) - this.currentPage;

			//Update the current page this.currentPage = this.activatePage + msg - 1;
			if (this.currentPage > this.totalPage) {
				this.currentPage = this.totalPage;
			}
			if (this.currentPage < 1) {
				this.currentPage = 1;
			}
			//If you are moving forward, you need to judge two situations. The first one is that if the next step you move to plus the number of page buttons displayed exceeds the total number of pages, //then we update the start of the page number button to the number of pages - the number of page number buttons displayed + 1
			//If it is less than or equal to, update the page number button to the clicked page number button if (gap > 0 && (this.currentPage + this.pagelist - 1) > this.totalPage) {
				this.activatePage = this.totalPage - this.pagelist + 1;
			} else if (gap > 0 && (this.currentPage + this.pagelist - 1) <= this.totalPage) {
				//Judge the minimum boundary of the button that needs to be adjusted if (this.currentPage >= (this.pagelist - this.mid)) {
					this.activatePage = this.currentPage - this.mid;
				}

			}


			//Same as above, we need to determine the index of the paging button clicked. If the number of clicked buttons - the number of paging buttons is less than 0, then we change the paging button position to 0.
			//Otherwise, update directly to the index of the clicked button if (gap < 0 && (this.currentPage - this.pagelist + 1) <= 1) {
				this.activatePage = 1;

			} else if (gap < 0 && (this.currentPage - this.pagelist + 1) > 1) {
				//Judge the maximum boundary of the button that needs to be adjusted if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
					this.activatePage = this.currentPage - this.mid;
				}



			}
			var el = event.currentTarget;
			this.getCurrentPageData();

		}
	}

})

structure

insert image description here

The above is the details of HTML+VUE paging to achieve cool IoT large-screen functions. For more information about HTML paging large-screen, please pay attention to other related articles on 123WORDPRESS.COM!

<<: JavaScript to implement drop-down list selection box

>>: Mysql anonymous login cannot create a database problem solution