jquery手写表格（二）

jQuery项目编写分页

上篇文章写了jQuery分页获取数据及展示，但还有一个问题是当页数多的时候显示会有问题，所以需要省略号显示。我们上篇写了renderPagination()方法来渲染分页，以下是对renderPagination()方法的一些调整：

function renderPagination(currentPage, pageSize, totalPages,totalCount) {
	 var maxVisiblePages = 5;//定义最大显示页数
	 // 计算中间应该显示的页码范围
     var startMiddlePage = Math.max(2, currentPage - Math.floor((maxVisiblePages - 1) / 2));
     var endMiddlePage = Math.min(totalPages - 1, startMiddlePage + maxVisiblePages - 2);
     var $pagination = $('#pagination ');
     $pagination.empty(); // 清空旧的分页链接
     if (totalPages === 0){
         $pagination.append("<span>暂无数据</span>")
     } else if (totalPages === 1) {
         $pagination.append("<span>共 "+totalCount+" 条</span><a class='page cur'>" + 1 + "</a><span>");
     }else {
     	 //添加第一页
      	 $pagination.append("<a class='page' data-page='"+1+"'>" + 1 + "</a>");
      	 if (totalPages > maxVisiblePages) {
      	 	if(currentPage > 4){//当前页大于4时，在页码的前半部分显示省略号
                $pagination.append('<span class="ellipsis">...</span>');
            }
            // 添加中间页码
            for(var i = startMiddlePage; i <= endMiddlePage; i++) {
                if (i == currentPage){
                    $pagination.append("<a class='page cur' data-page='"+i+"'>" + i + "</a>");
                }
                else {
                    $pagination.append("<a class='page' data-page='"+i+"'>" + i + "</a>");
                }
            }
            // 如果中间页码没有覆盖到最后一页，添加省略号
            if (endMiddlePage < totalPages - 1) {
                $pagination.append('<span class="ellipsis">...</span>');
            }
      	 }else{
      	 	for (var i=2; i<=totalPages-1; i++){
              if (i == currentPage){
                 $pagination.append("<a class='page cur' data-page='"+1+"'>" + i + "</a>");
              }
              else {
                 $pagination.append("<a class='page' data-page='"+1+"'>" + i + "</a>");
              }
         	}
      	 }
      	 //添加最后一页
         $pagination.append("<a class='page' data-page='"+totalPages+"'>" + totalPages + "</a>");
         //去掉当前页样式
         $pagination.find('.page').removeClass('cur');
         //获取当前页元素，增加当前页样式
         $pagination.find('.page[data-page="' + currentPage + '"]').addClass('cur');
         $pagination.children().first().before("<span>共 "+totalCount+" 条</span><a class='pre'></a>")
         $pagination.children().last().after("<a class='next'></a><span>前往 <input class='jump' type='text' value=''/> 页</span>")
         if (currentPage == 1){
             $pagination.find('.pre').addClass("disabled")
         }
     }
  };