js 分页功能实现

分页的主要是为了解决当表单数据过多时，查看起来比较不方便吗，这个时候就需要分页查看。

效果演示：

 

HTML代码：

<div class="dibu">
		<!-- 分页 -->
		<div class="an">
			<button onclick="jian()" class="jian"> < </button>
					<span class="annnie">
					</span>
			<button onclick="jia()" class="jia"> > </button>
		</div>

		<!-- 筛选 -->
		<div class="san">
			<select name="" id="xiala" onclick="ccc()">
				<option value="5">5条/页</option>
				<option value="7" >7条/页</option>
				<option value="10">10条/页</option>
			</select>
		</div>
		<!-- 跳转页 -->
		<div class="tiao">
			跳至<input type="text" style="width: 30px;" class="tiaozhuan">页
		</div>

 CSS代码：

.dibu {
			position: absolute;
			bottom: 30px;
			display: flex;
			justify-content: end;
			width: 100%;
			left: -30px;

		}

		.an button {
			width: 20px;
			height: 20px;
			color: black;
			margin-left: 5px;
		}

		.san {
			margin-left: 20px;
			margin-right: 10px;
		}

		.tiao {
			margin-right: 10px;
		}

js部分：

//首先声明两个变量，一个为当前页面，一个为页面的渲染的行数
let ye = 0;//页数
let ge = 5; //个数

//通过页数和个数循环数据
 for (let i = ye * ge; i < (ye + 1) * ge; i++) {
//判断数据是否存在undefined,如果不加上这一行并存在页面数量不满足个数要求，就可能报错
        if (arr[i] != undefined) {
            str += '<tr><td>' +
                '<input type="checkbox" class = "check">' +
                ' <span>' + arr[i].serial + ' &nbsp&nbsp&nbsp&nbsp</span></td>' +
                '<td>' + arr[i].odd + '</td>' +
                '<td>' + arr[i].point + '</td>' +
                '<td>' + arr[i].classify + '</td>' +
                '<td>' + arr[i].grade + '</td>' +
                ' <td>' + arr[i].registrant + '</td>' +
                '<td style = "color:' + col + '">' + arr[i].status + '</td>' +
                '<td>' + arr[i].time + '</td>' +
                '<td>' + arr[i].operate + '</td></tr>'
        }
    }

渲染按钮数量：

let aaa = Math.ceil(arr.length / ge)
    for (let j = 0; j < aaa; j++) {
        anstr += '<button  class = "anan" strly="padding:10px;" onclick = fn(' + j + ')>' + (j + 1) + '</button>';
    }

按钮点击事件：

//翻页事件
function fn(j) {
    ye = j;
    // console.log(j);
//重新渲染页面
    xuanran()
}

//减翻页事件
function jian() {
    document.getElementsByClassName('jian')
    let aaa = Math.ceil(arr.length / ge)
    if (ye > 0 && ye <= aaa) {
        console.log(ye);
        ye--
        xuanran()
    }
}
//加翻页事件
function jia() {
    let aaa = Math.ceil(arr.length / ge)
    if (ye == (aaa - 1)) {
        ye = (aaa - 1)
    } else {
        ye++
        xuanran()
    }
}

下拉框选择页面数量：

//选择每页的个数
let xiala = document.getElementById('xiala')
function ccc() {
    if (xiala.value == 5) {
        console.log(xiala.value);
        ge = 5;
        setTimeout(
            function () {
                ye = 0;
                xuanran()
            }, 1000)


    } else if (xiala.value == 7) {
        ge = 7;
        setTimeout(
            function () {
                ye = 0;
                xuanran()
            }, 1000)
    } else {
        ge = 10;
        setTimeout(
            function () {
                ye = 0;
                xuanran()
            }, 1000)
    }
}

跳转页面数量：

//跳转页面数

let tiaozhuan = document.getElementsByClassName('tiaozhuan')[0];
tiaozhuan.addEventListener('keyup', function () {
    let aaa = Math.ceil(arr.length / ge)
    let t = tiaozhuan.value;
    if (t != '' && t <= aaa) {
        tiaozhuan.onkeypress = function (event) {
            if (event.which === 13) {
                ye = 0;
                //点击回车要执行的事件
                ye += parseInt((t - 1));
                console.log(t - 1);
                xuanran()
                ye = 0;
            }
        }
    }
})