bootstrap分页

html部分：

  <div class="container-fluid">
    <nav>
      <ul class="pagination" id="pag-result">
      </ul>
    </nav> 
  </div>

css部分（鼠标形状和页面输入跳转的样式）：

#pag-result li span{
cursor: pointer;
}
#pag-result>.disabled>span{
cursor: default;
}
#input-page{
width:5em;
height:1.8em;
margin:0.4em 0.2em 0.2em 0.2em;
text-align: center;
}
#input-page-btn{
margin-left:1em;
font-size: 1em;
width:3em;
background-color: #337ab7;
color:#fff;
}
.input-page-div{
display: inline-block;
margin-left:1em;
}

js部分：

//当前激活的页码对象，当前显示的最小页码，前一页、下一页、第一页、最后一页的对象
var $thisPageNumber, thisShowMinNumber, $prePage, $nextPage, $firstPage, $lastPage;
function CreatePagNav(totalPageNum ) {//totalPageNum：总页数
  var $pagResult = $("#pag-result");
  var initStr = [];
  $pagResult.empty();//清空原有的页码
  if (totalPageNum && totalPageNum >= 1) {//页码总数大于等于1时才显示页码
    initStr.push('<li class="disabled" id="first-page"><span value="1">首页</span></li>');
    initStr.push('<li class="disabled" id="pre-page"><span value="0">上一页</span></li>');
    if (totalPageNum == 1) {//如果只有一页，则下一页和末页也要禁用
      initStr.push('<li class="disabled" id="next-page"><span value="2">下一页</span></li>');
      initStr.push('<li class="disabled" id="last-page"><span value="' + totalPageNum + '">末页</span></li>');
    }
    else {
      initStr.push('<li id="next-page"><span value="2">下一页</span></li>');
      initStr.push('<li id="last-page"><span value="' + totalPageNum + '">末页</span></li>');
    }
    //页面自定义跳转、包括输入框、页面总数的提示、和确定按钮，其中输入框默认显示当前选中的页码
    initStr.push('<div class="input-page-div">当前第<input type="text" id="input-page" value="1" />页，共<span id="totalPage">' + totalPageNum +
      '</span>页<button class="btn btn-xs" id="input-page-btn">确定</button></div>');
    $pagResult.append(initStr.join(""));//插入功能按键(首页、末页、前一页、后一页、页面自定义跳转)
    //初始化变量
    $prePage = $("#pre-page");
    $nextPage = $("#next-page");
    $firstPage = $("#first-page");
    $lastPage = $("#last-page");
    //生成具体的页码
    CreatPageLi(1, 1, totalPageNum);
    //显示页码（整个html）
    $pagResult.parent().parent().show();
    //绑定点击事件
    //页码的点击事件
    $("#pag-result>li").bind("click", pageClick);
    //页面自定义跳转按钮的点击事件
    $("#input-page-btn").bind("click", function () {
      var numberPage = parseInt($("#input-page").val());//要转为数字类型
      if (isNaN(numberPage)) return false;
      GotoPage(numberPage);//跳转到页面
    });
  }
  else {//如果页码总数小于1，则隐藏整个html标签
    $pagResult.parent().parent().hide();
  }
}
//无论是直接点击页码、还是上一页、下一页、首页、末页，或是自定义跳转都使用此函数
//直接跳到指定页面
function GotoPage(numberPage) {
    numberPage = parseInt(numberPage);//要跳转的页码，注意要转换为数字类型
    var maxNumber = parseInt($lastPage.children().attr("value"));//最大页码
    var oldNumber = parseInt($nextPage.children().attr("value")) - 1;//当前页码
    //确保页码正确跳转，跳转的页面不能小于等于0且不能大于总页数
    if (numberPage <= 0) numberPage = 1;
    else if (numberPage > maxNumber) numberPage = maxNumber;
    //设置页码输入框的值
    $("#input-page").val(numberPage);
    //页码相同时不用操作，要跳转的页码就是当前页码
    if (numberPage == oldNumber) return false;
    //功能按钮的开启与关闭
    //当跳转的页码为首页时，首页和上一页应禁止点击
    if (numberPage == 1) {
      $prePage.addClass("disabled");
      $firstPage.addClass("disabled");
    }
    else {//否则应允许点击
      $prePage.removeClass("disabled");
      $firstPage.removeClass("disabled");
    }
    //当跳转的页码为末页时同理
    if (numberPage == maxNumber) {
      $nextPage.addClass("disabled");
      $nextPage.next().addClass("disabled");
    }
    else {
      $nextPage.removeClass("disabled");
      $nextPage.next().removeClass("disabled");
    }
    //开始跳转
    //修改上一页和下一页的值，详见之后的设计思想
    $prePage.children().attr("value", numberPage - 1);
    $nextPage.children().attr("value", numberPage + 1);
    //计算起始页码
    var starPage = computeStartPage(numberPage, maxNumber);
    if (starPage == thisShowMinNumber) {//要显示的页码是相同的，不用重新生成页码
      去除上一个页码的激活状态
      $thisPageNumber.removeClass("active");
      $thisPageNumber = $("#commonNum" + (numberPage - thisShowMinNumber + 1));
      //为跳转的页码加上激活状态
      $thisPageNumber.addClass("active");
      //页面跳转成功
      //执行相应的动作
    }
    else {//需要重新生成页码
      CreatPageLi(starPage, numberPage, maxNumber);
     //页面跳转成功
     //执行相应的动作
     //重新绑定事件（执行完相应的动作后）
     $(".commonNum").bind("click", pageClick);
    }
}
//根据当前显示的最小页码、要跳转的页码和最大页码来计算要重新生成的起始页码
//要显示的页码数量为10个
function computeStartPage(numberPage, maxPage) {
  var startPage;
  if (maxPage <= 10) startPage = 1;
  else {
    if ((numberPage - thisShowMinNumber) >= 7) {//跳转到十页中的后三页或之后的页码时尽量显示后续页码
      startPage = numberPage - 3;
      if (startPage + 9 > maxPage) startPage = maxPage - 9;//边界修正
    }
    else if ((numberPage - thisShowMinNumber) <= 2) {//跳转到十页中的前三页或之前的页码时尽量显示更前页码
      startPage = numberPage - 6;
      if (startPage <= 0) startPage = 1;//边界修正
    }
    else {//不用改变页码
      startPage = thisShowMinNumber;
    }
  }
  return startPage;
}
//生成具体的页码
function CreatPageLi(page, activePage, maxPage) {
  page = parseInt(page);//起始页码
  activePage = parseInt(activePage);//要激活的页码
  maxPage = parseInt(maxPage);//最大页码
  var initStr = [], j = 1;
  thisShowMinNumber = page;//记录当前显示的最小页码
  for (var i = 1; i <= maxPage && i <= 10; i++ , page++) {
    if (page == activePage) {
      initStr.push('<li class="commonNum active" id="commonNum' + i + '"><a href="javascript:" value="' + page + '">' + page + '</a></li>');
      j = i;
    }
    else
      initStr.push('<li class="commonNum" id="commonNum' + i + '"><a href="javascript:" value="' + page + '">' + page + '</a></li>');
    }
    $prePage.siblings(".commonNum").remove();//去除原有页码
    $prePage.after(initStr.join(""));
    $thisPageNumber = $("#commonNum" + j);//记录当前的页码对象
}
//具体页码和功能按键（前后首末页）的点击处理函数
function pageClick() {
  var $this = $(this);
  //只有在页码不在激活状态并且不在禁用状态时才进行处理
  if (!$this.hasClass("disabled") && !$this.hasClass("active"))
    GotoPage($this.children().attr("value"));
}

效果图：

设计思路：

1. 最大显示的页码数量为10个，如显示1~10页、15~24页。

2. 在每个页码按键上设置一个值，当点击这个按键时，便跳转的这个值的页码，例如“前一页”的值为2，则点击前一页的时候跳转到第2页，当跳转到第2页时，修改前后页的值，又如当前点击的是第18页，而在生成页码时，这个按键的值是18，那个就跳转到第18页。

3. 无论是点击页码按键进行跳转还是输入页码进行跳转都统一调用GotoPage(numberPage)函数。

4. 在计算页码时，包括计算起始页码和前后页按钮的值，要注意将字符串类型的页码转为数值类型。

5. 每次生成页码时都记录当前的最小页码，如当前显示的页码是5-14页，则当前最小页码是5；

6. 每次进行页码跳转时都要计算起始页码，如果计算出来的起始页码和当前的起始页码相等，则不用重新生成页码，如当前显示的页码是5-14页，而计算出来的起始页码是5，则不用重新生成页码。

7. 重新生成页码后需要重新绑定点击事件。

8. 跳转到十页中的后三页或之后的页码时尽量显示更后的页码，跳转到十页中的前三页或之前的页码时尽量显示更前的页码。

优化思路：

1. 点击事件不必绑定在每一个具体的按钮上，可以绑定到最外层的ul或其他的容器，依靠事件冒泡原理来处理其点击事件，要注意的是，要判断事件是来自具体的按钮还是直接来自ul或是自定义跳转。

2. 将要显示的最大页码数量设置为一个变量，即可自定义。

3. 可以让js生成更多的html，而不是手写更多的html。