分页功能分析

			// 下面的渲染
			let nums = 5; /* 每页多少条数据 */
			let k = 1; /* 页码 */
			let totalPage; /* 总按钮 */
			let total; /* 数据长度 */
			let data;

			document.addEventListener('keyup', function(e) {
				if (e.keyCode === 13) {
					tar();
				}
			});




			let xhr = new XMLHttpRequest();
			xhr.open('get', './js/pagination.json', true);
			xhr.send();

			xhr.onreadystatechange = function() {
				if (xhr.readyState === 4 && xhr.status === 200) {
					let text = xhr.responseText;
					let texts = JSON.parse(text)

					console.log(texts);
					data = texts;
					console.log(data);
					total = data.length;
					vray(data, nums, k);
					generatePagination(total, nums, k);
				} else if (xhr.readyState === 4 && xhr.status !== 200) {
					console.error('请求失败，状态码:', xhr.status);
				}
			};


			function vray(data, nums, k) {
				totalPage = Math.ceil(total / nums);
				let str = '';
				for (let i = (k - 1) * nums; i < k * nums; i++) {
					if (data[i] == undefined) break;
					let item = data[i];
					let company = item.company || '暂无信息';
					let name = item.name || '暂无信息';
					str += `<div class="content_box">
		                  <div class="buttom_id_buttom">${item.id}</div>
		                  <div class="buttom_compname_buttom">${company}</div>
		                  <div class="buttom_name_buttom">${item.title}</div>
		                  <div class="spimg_buttom"><img src="${"http://bas.xingyuncm.cn" + item.img}" alt="" class="spimg_buttom_img" onerror="this.src='./img/img8796518c9442d890.png'"/></div>
		                  <div class="item_name_buttom">${name}</div>
		                  <div class="examine_and_verify_buttom"><label class="switch"><input ${item.status == 1 ? 'checked' : ''} type="checkbox" class="available_checkbox"><div class="available_slider"></div></label></div>
		                  <div class="Available_buttom"><label class="switch"><input ${item.type == 1 ? 'checked' : ''} type="checkbox" class="examine_checkbox" value="${item.type}"><div class="examine_slider"></div></label></div>
		                  <div class="found_time_buttom">${item.create_time}</div>
		              </div>`;
				}
				$(".goods-left").html(str);
			}

			function generatePagination(total, nums, k) {
				function initPagination() {
					let pagination = document.getElementById('pagination');
					let pageHtml = '';
					let prevButton = `<li class='list-items' id='btnPrev'>&laquo;</li>`;
					let nextButton = `<li class='list-items' id='btnNext'>&raquo;</li>`;
					let firstPage = `<li class='list-items' pagenumber=1>1</li>`;
					let lastPage = `<li class='list-items' pagenumber=${totalPage}>${totalPage}</li>`;
					let leftOmitPage = `<li class='list-items' id='btnGoLeft'>...</li>`;
					let rightOmitPage = `<li class='list-items' id='btnGoRight'>...</li>`;
					let pageTips =
						`<div class="tarbox">前往<input class="page"/>页 <button onclick="tar()" class="target">跳转</button></div>`;
					pageHtml += prevButton;

					if (totalPage <= 10) {
						for (let i = 1; i <= totalPage; i++) {
							pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
						}
					} else if (k <= 8) {
						for (let i = 1; i <= 9; i++) {
							pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
						}
						pageHtml += rightOmitPage;
						pageHtml += lastPage;
					} else if (k > totalPage - 7) {
						pageHtml += firstPage;
						pageHtml += leftOmitPage;
						for (let i = totalPage - 8; i <= totalPage; i++) {
							pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
						}
					} else {
						pageHtml += firstPage;
						pageHtml += leftOmitPage;
						for (let i = k - 3; i <= k + 3; i++) {
							pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
						}
						pageHtml += rightOmitPage;
						pageHtml += lastPage;
					}
					pageHtml += nextButton;
					pageHtml += pageTips;
					pagination.innerHTML = pageHtml;
					document.querySelector(`li[pagenumber='${k}']`).classList.add('active');

					document.querySelectorAll('li[pagenumber]').forEach(function(elements) {
						elements.onclick = function() {
							k = Number(this.innerHTML);
							updatePaginationAndContent();
						};
					});
					if (k == 1) $('#btnPrev').css('cursor', 'not-allowed');
					if (k == totalPage) $('#btnNext').css('cursor', 'not-allowed');

					document.getElementById('btnPrev').addEventListener('click', function() {
						if (k > 1) {
							k--;
							updatePaginationAndContent();
						}
					});

					document.getElementById('btnNext').addEventListener('click', function() {
						if (k < totalPage) {
							k++;
							updatePaginationAndContent();
						}
					});

					let btnGoLeft = document.getElementById('btnGoLeft');
					if (btnGoLeft) {
						btnGoLeft.addEventListener('mouseenter', function() {
							this.innerHTML = '&lt;';
						});
						btnGoLeft.addEventListener('mouseleave', function() {
							this.innerHTML = '...';
						});
						btnGoLeft.addEventListener('click', function() {
							if (k > 10) {
								k -= 10;
								updatePaginationAndContent();
							}
						});
					}

					let btnGoRight = document.getElementById('btnGoRight');
					if (btnGoRight) {
						btnGoRight.addEventListener('mouseenter', function() {
							this.innerHTML = '&gt;';
						});
						btnGoRight.addEventListener('mouseleave', function() {
							this.innerHTML = '...';
						});
						btnGoRight.addEventListener('click', function() {
							if (k < totalPage - 10) {
								k += 10;
								updatePaginationAndContent();
							}
						});
					}
				}

				function updatePaginationAndContent() {
					initPagination();
					vray(data, nums, k);
				}

				initPagination();
			}

			function tar() {
				let num = document.querySelector('.page').value;
				if (num === '') {
					alert('页码不能为空');
				} else if (num > totalPage || num <= 0 || num % 1 !== 0) {
					alert('页码数不对或不存在该页码');
				} else {
					k = Number(num);
					vray(data, nums, k);
					generatePagination(total, nums, k);
				}
			}

首先获取json里面的假数据，然后定义每页显示的条目码，以及页码的初始值为整条数据长度除以条目码
    渲染页面上每页的长度是五条所以这里设置一个k的初始值为0
        然后for循环i等于k * num（条目码），范围为（k + 1）* num然后字符串拼接
            要进行判断，当i大于等于整条数据的长度的时候break停止函数
    页码的渲染，页码这里是要进行计算的，不过在上面的时候我就已经计算好了，并赋值给了一个变量
        所以在这里就直接for循环，遍历里面所有的值，然后条件为小于等于，一定要添加等于，如果数据除以条目码会有余数，如果不添加的话，就不会出现最后几条数据
    添加左箭头和右箭头，我这里是将左箭头和右箭头添加到一起了，并没有一个在左边一个在右边
        给左箭头和右箭头添加点击事件
            右箭头，右箭头的点击事件就是将数据向后面挪动一页，也就是将k的值加一，然后调用渲染函数就OK了，要判断k等于最后一页的时候要提示用户这位最后一个，然后调用左箭头
            左箭头，其实和右箭头是相反的，向左挪动一个呗，就是让k的值减一，然后判断为第一页的时候提示用户为第一个，然后调用渲染函数
    input框，这里面用的是键盘的点击事件，enter键，键盘码为13
        首先要先获取input框，然后给input添加一个键盘事件，然后进行判断e.keycode是否等于13，，然后在获取输入框里面的值，用判断输入的是第几页
            如果输入进去的值大于条形码的页数或者小于1的时候，弹窗提示用户，请输入正确的页码，否则把输入进去的值减一赋给k然后清空字符串，调用渲染函数就OK了
    下拉框选择每页的条目码为多少，这里面很简单的，无非就是将重新赋一下，然后调用渲染函数
        首先先获取到每个option框里面的值，然后根据点击选择的value值，将值赋给num，然后将数据渲染到页面上，绑定一个onchange事件，然后在函数里面切记先将str的值和里面的页码的值也要清空，然后获取选中项的索引，然后将值赋给num
            然后计算页码，因为num重新赋值了，所以要计算，然后调用一下渲染函数，将点击过后新的值渲染到页面上
    页码的省略号的制作，首先先将第一页和最后一页的设置一个变量，以及省略号也定义一个变量，方便后面的使用
        然后用if判断，我这里判断的时候总页数小于等于10的时候将页码全部显示出来，，然后接着else if判断，当总页数大于10的时候且当前页数远离总页数的时候，for循环渲染i的整条数据
            然后接着判断当总页数大于10且接近总页数的时候，也就是for循环里面判断当k的值大于整条数据长度 - 7的时候，然后将第一页和最后的省略号字符串拼接中间用i循环将页码渲染
                除开刚刚说的哪两种情况，当页面在中间的时候，我写的是将中间的那页码显示出来，然后将第一页和尾页显示出来，尾页前面用省略号以及第一页的后面也要用省略号
                    前面写的是添加颜色写在了function里面，但是在这种情况下已经不适用了，所以我就添加到里面，用的三元判断去更改颜色