html css js 分页

样式基于bootstrap

<ul class="pagination" data-page="1">
   <li id="sortTable_previous">
		 <a href="javascript:void(0);" data-type="left">
		   	<span class="icon font_family icon-jiantou"></span>
		 </a>
    </li>
    <li class="pagelist">
                                
    </li>
    <li id="sortTable_next">
         <a href="javascript:void(0);" data-type="right">
            <span class="icon font_family icon-jiantou"></span>
         </a>
    </li>
</ul>

//总数据，当前页数，一页显示几条数据
showPage(totalPage, pageIndex, pageSize);//显示分页
$(".pagination").attr("data-pageIndex",pageIndex);
if (data.itemCount == 0) {
     $(".pagination").hide();
} else {
     $(".pagination").show();
}
//分页方法
function showPage(totalPage, pageIndex, pageSize) {
     var _LENGTH = 5;			//最大页数5
     var pageArr = [];			//按钮数组
     if (totalPage % pageSize == 0) {	//整页
         pageAll = totalPage / pageSize;	//页数
     } else {					//非整页
         pageAll = (totalPage - totalPage % pageSize) / pageSize + 1;
     }
	//总页数小于5页
	if (pageAll <= _LENGTH) {
    	for (var i = 0; i < pageAll; i++) {
            pageArr[i] = i + 1;
        }
    } else {									//总页数大于5页
        if (pageIndex + 2 <= pageAll && pageIndex - 2 > 0) { //当前页没有超过总页数
                for (var i = 0; i < _LENGTH; i++) {
                    pageArr[i] = pageIndex - 2 + i;
                }
            } else if (pageIndex <= 2) {
                pageArr = [1, 2, 3, 4, 5];
            } else {
                for (var i = 0; i < _LENGTH; i++) {
                    pageArr[i] = pageAll - 4 + i;
                }
            }
        }
        $(".pagination").attr("data-pageAll", pageAll); //获取总页数
        //绘制页面
        drawPage(pageArr, pageIndex, pageAll);
    }
    //绘制分页dom方法
    function drawPage(pageArr, pageIndex, pageAll) {
        $(".pagination li,.pagination li a").removeClass("disabled");
        if(pageIndex == 1){ //禁用上一页
            $("#sortTable_previous,#sortTable_previous a").addClass("disabled");
        }else if(pageIndex == pageAll){ //禁用下一页
            $("#sortTable_next,#sortTable_next a").addClass("disabled");
        }

        var _html = "";
        for (var i = 0; i < pageArr.length; i++) {
            if (pageArr[i] == pageIndex) {
                _html += '<a class="paginate_button active" href="javascript:void(0);" data-type="list">' + pageArr[i] + '</a>';
                $(".pagination").attr("data-pageIndex", pageIndex);
            }else{
                _html += '<a class="paginate_button" href="javascript:void(0);" data-type="list">' + pageArr[i] + '</a>';
            }
        }
        $(".pagelist").html(_html);
    }
    /*分页*/
    $(".pagination").on("click", "a", function () {
        if($(this).hasClass("disabled")) return;
        var text = $(this).text();		//获取当前点击页数
        var type = $(this).attr("data-type");		//获取当前点击类型
        var pageIndex = $(".pagination").attr("data-pageIndex");
        if (type == "left") { 		//如果是点击的上一页
            if (pageIndex > 1) {
                pageIndex--;
            }
        } else if (type == "right") {	//如果是点击的下一页
            if (pageIndex < pageAll) {
                pageIndex++;
            }
        } else {
            pageIndex = parseInt(text);		//将获取的页数转化成数字    
        }
        dataAjax(pageIndex);
    });