html+ vue.js Implementing paging compatible IE

#### When the function is simple , In a single html Use in vue.js Pagination presentation materials , There is no scaffold installed , Or use related UI frame , You need to write a pager , It is the most reasonable and convenient solution , Let's take a look at the implementation ：  #### Code on ：

1. Make it simple CSS, The code here is folded

	[v-cloak] {
		display: none;
	}
	#app {
		text-align: center;
		padding-top: 300px;
                height:500px;
	}
	.pageContainer {
		width: 800px;
		margin: 100px auto;
		text-align: center;
		font-size: 14px;
		color: #A3A3A3;
	}
	.pageContainer ul.pagesInner {
		height: 30px;
		line-height: 30px;
		display: inline-block;
                padding: 0;
	}
	.pageContainer ul.pagesInner li {
		width: 30px;
		height: 30px;
		display: inline-block;
		border: 1px solid #E5E5E5;
		margin: 0 5px;
                list-style: none;
	}
	.pageContainer ul.pagesInner li.actived {
		background: #FF6200;
		color: #ffffff;
	}
	.pageContainer .page-size-box {
		position: relative;
		display: inline-block;
		width: 70px;
		border: 1px solid #E5E5E5;
		height: 30px; 
		line-height: 30px;
	}
	.pageContainer ul.size-option {
		display: inline-block;
		border: 1px solid #E5E5E5;
		position: absolute;
		margin: 0;
		padding: 0;
		left: 0;
		top: -120px;
		background: #ffffff;
	}
	.pageContainer ul.size-option li{
		list-style: none;
		width: 70px;
	}
	.pageContainer ul.size-option li:hover{
		color: #FF6200;
	}
	.pageContainer form {
		display: inline-block;
	}
	.pageContainer form input,
	.pageContainer button {
		outline: none;
		padding: 0;
		width: 46px;
		height: 30px;
		background: #ffffff;
		border: 1px solid #E5E5E5;
		color: #A3A3A3;
	}

2. Make it simple HTML ```

The first {{pageIndex}} Page , Each page shows {{pageSize}} Strip

common {{dataListLength}} Strip

• <
• {{item}}
• >

{{pageSize}} Strip / Page

• {{item}} Strip / Page

Jump to     Page   button @click="handleGoToPage"> Make sure

``` ## 3. Something's going on ~~~~ #### First of all, the realization of paging function is analyzed ： - The first and last pages always show , - Through the total number of data dataListLength And the number of bars per page pageSize, Calculate the total number of pages pageTotalNum - Monitoring watch once , Number of bars per page pageSize, Reset current page number pageIndex=1 - The pagination I designed displays at most 5 Page number ( You can adjust according to your needs ), The rest ... Instead of , And set not to click , - Switch according to different total pages and current page number , The display form of the tab is different , The display form is shown in the figure below, corresponding to the serial number > 1. Total pages <= 1, Don't show pager > 2. Total pages <= 5 && Total pages > 1, Show all page numbers > 3. Total pages > 5 && Current page <= 3 , The last page is ..., Page number from ** Left ** Go to ** Right ** Calculation > 4. Total pages > 5 && Current page > 3 && Current page < Total pages - 3 , The last page number is ..., The page number is calculated according to the current page number ,**±1** > 5. Total pages > 5 && Current page > 3 && Current page > Total pages - 3 , The second positive page number is ..., Page number from ** Right ** Go to ** Left ** Calculation  ``` ```