来源：互联网转载 | 更新日期：2023-09-08 19:58:32

用JQuery实现了一个分页器，大部分情况下，我们分页是用ajax请求后台数据，然后显示数据。在这里呢，我就把数据都生成了，然后显示当前页隐藏其他页内容，下面就来上代码吧~

下面是生成分页、内容、分页按钮等，生成页面内容时比较随意，直接是全部生成“1111111”了。

//页面初始化生成,默认值为下拉条数的第一个值和第一页。$(document).ready(function() {var selectNum = $("select").eq(0).val();createContent(selectNum, 1);$(".navUl li").eq(0).trigger("click");})var parameter = {total: 42, //数据长度lastPage: '', //最后页内容的长度pages: '', //页数currentPage: $("#pageInput"), //当前页数navUl: $(".navUl"), //页数导航UlcontentClass: $(".contentClass") //内容Div}//生成每页的内容function createContent(selectNum, index) {var totalNum = parameter.total, //全部数据长度last = totalNum % selectNum, //最后页内容的长度pages = Math.ceil(totalNum / selectNum), //页数currentPage = parameter.currentPage, //当前页contentClass = parameter.contentClass, //内容DivnavUl = parameter.navUl, //总页数length; //每页的条数//重置部分内容currentPage.val(""); //格式化当前页的值contentClass.text(""); //格式化生成的内容navUl.text(""); //格式化页数按钮$(".pageLength span").html(totalNum); //设置内容总条数if (totalNum > 0) { //判断数据长度是否为0for (var n = 0; n < pages; n++) { //循环页数生成内容if (totalNum >= selectNum) { //判断是否为最后页，若是最后页则生成最后页的数据length = selectNum;} else {length = last;}var content = $("<ul>").addClass("content"); //生成每页的Ul标签//根据每页的条数生成对应页的条数和内容for (var i = 0; i < length; i++) {var licontent = $("<li>").text('1111111'); //这里生成的内容比较随意，在实际情况中应该是要循环添加内容content.append(licontent);}totalNum -= length; //减去已生成的条数contentClass.append(content);}//循环生成页数导航for (var j = 0; j < pages; j++) {var liNav = $("<li>").text(j + 1).on('click', navClick); //绑定点击事件navUl.append(liNav);}} else { //若无数据则显示"无数据"var content = $("<ul>");content.addClass("content");var liNav = $('<li>').text(1),licontent = $('<li>').text('无数据');content.append(licontent);navUl.append(liNav);contentClass.append(content);}$(".navUl li").eq(index - 1).trigger("click"); //根据已选的页数，触发页数导航$("select").val(selectNum); //设置每页条数}

以下是换页和选择每页显示条数 事件 

//页数导航的点击事件，以点击当前页，隐藏同类的其他页的方式。function navClick() {$(this).addClass("active").siblings().removeClass("active");var othis = $(this),index = othis.index();parameter.currentPage.val(othis.text());$(".content").eq(index).show().siblings().hide();}//上一页和下一页按钮的点击事件$(".btns").click(function() {var othis = $(this),indexInputVal = parameter.currentPage.val(), //获取当前页selectVal = $("#select option:selected").val(), //获取每页条数值navLiLen = $(".navUl li").length; //获取页数长度if (othis.hasClass("pre")) { //判断是否为"上一页"按钮if (indexInputVal == 1) {createContent(selectVal, navLiLen);} else {createContent(selectVal, --indexInputVal);}} else {if (indexInputVal == navLiLen) {createContent(selectVal, 1);} else {createContent(selectVal, ++indexInputVal);}}})//选择每页条数触发事件$("select").change(function() {var othis = $(this).val();createContent(othis, 1);$(".navUl li").eq(0).trigger("click");})//直接输入页数，跳转到相应页parameter.currentPage.keyup(function(event) {var indexInputVal = parameter.currentPage.val(), //获取当前页selectVal = $("#select option:selected").val(); //获取每页条数值if (event.keyCode == '13') {createContent(selectVal, indexInputVal);}});

演示图 如下：