利用JQuery实现分页器

用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"), //页数导航Ul
      contentClass: $(".contentClass") //内容Div
    }

 
//生成每页的内容
    function createContent(selectNum, index) {
      var totalNum = parameter.total, //全部数据长度
          last = totalNum % selectNum, //最后页内容的长度
          pages = Math.ceil(totalNum / selectNum), //页数
          currentPage = parameter.currentPage, //当前页
          contentClass = parameter.contentClass, //内容Div
          navUl = parameter.navUl, //总页数
          length; //每页的条数

      //重置部分内容
      currentPage.val(""); //格式化当前页的值
      contentClass.text(""); //格式化生成的内容
      navUl.text(""); //格式化页数按钮

      $(".pageLength span").html(totalNum); //设置内容总条数
 
      if (totalNum > 0) { //判断数据长度是否为0
        for (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);
      }
    });

演示图 如下：