基于jquery的简单分页实现

先上图：

之前在做表格插件想把分页整合进去，原本去网站找一个现成的整合进去，发现有些太简单或者很复杂，达不到自己的要求，自己想还是自己整一个，顺便了解一下其中的原理。
分页样式是基于boostarp的。
（1）页面引入boostarp.css和jquery
（2）html代码

<div id="pageBox" style="width:1000px;margin: 30px auto;">
</div>

（2）js代码

var total = 500,//数据总条数
    pageNumber = 1,//当前页
    pageSize = 10, //每页显示的条数
    edges = 2,//两侧显示的页码数 大于1
    playes = 5,//主页码区显示的页码数 大于3
    pages = Math.ceil(total / pageSize);//总页数
renderPageItem();
function renderPageItem() {
  $ul = $('<ul class="pagination"></ul>');
  var start = 1;
  var end = pages;
  if (playes % 2) {
    //playes是奇数
    start = pageNumber - Math.floor(playes / 2);
    end = pageNumber + Math.floor(playes / 2);
  } else {
    //playes是偶数
    start = pageNumber - (playes / 2 - 1);
    end = pageNumber + playes / 2;
  }

  if (start <= edges + 1) {
    start = 1;
    if (end < playes && playes<pages) {
        end = playes;
    }
  } else {
    for (var i = 1; i <= edges; i++) {
      $ul.append(renderItem(i));
    }
    $ul.append('<li><span>...</span></li>')
  }
  if (end < pages - edges) {
    for (var i = start; i <= end; i++) {
      $ul.append(renderItem(i));
    }
    $ul.append('<li><span>...</span></li>');
    for (var i = pages - edges + 1; i <= pages; i++) {
      $ul.append(renderItem(i));
    }
  } else {
    end = pages;
    if(start>pages-playes+1){
      start = pages-playes+1
    }
    for (var i = start; i <= end; i++) {
      $ul.append(renderItem(i));
    }
  }
  $ul.prepend(renderPrevItem());
  $ul.append(renderNextItem());
  $('#pageBox').empty().append($ul);
}

function renderItem(i) {
  $item = $('<li><a href="#">' + i + '</a></li>');
  if (i == pageNumber) {
    $item.addClass('active');
  }
  $item.on('click', (function (num) {
    return function () {
      pageNumber = num;
      renderPageItem();
    }
  })(i));
  return $item
}

function renderPrevItem() {
  $prev = $('<li><a href="#">&laquo;</a></li>');
  if (pageNumber == 1) {
    $prev.addClass('disabled');
  } else {
    $prev.on('click', function () {
      pageNumber = pageNumber - 1;
      renderPageItem();
    })
  }
  return $prev;
}

function renderNextItem() {
  $next = $('<li><a href="#">&raquo;</a></li>');
  if (pageNumber == pages) {
    $next.addClass('disabled');
  } else {
    $next.on('click', function () {
      pageNumber = pageNumber + 1;
      renderPageItem();
    })
  }
  return $next;
}

其实可以整合成一个插件来的，最近忙也没时间整合了，原本是打算整合到表格插件里面去的，发现这样表格插件需要和ajax整在一起，决定还是先不放进去了。这个的具体代码可以看这里点我看源码和效果