JavaScript模拟百度分页

 <script type="text/javascript">

var currentPageNum =

<%=currentPageNum%>

var listSize =

<%=listSize%>

var resultsList =

<%=results%>

var pageSize = 10;

var pageSum = Math.ceil(listSize / pageSize);

$(document).ready(function() {

//获得结果列表

$("#searchBox").focus();

var objs = resultsList.resultsList;

//创建结果内容

createList(objs);

//创建分页DIV

createPages(currentPageNum, pageSum, 10);

//为分页DIV绑定事件

bindEventForPageDiv();

});

//检查输入为空

function check() {

var a = $("#searchBox").val();

if ($.trim(a) == "") {

alert("关键字不能为空！");

$("#searchBox").focus();

return false;

} else {

$('form').submit();

}

}

//当点击某一页时,去要第pageNum页的数据

function pageClick(pageNum) {

if (pageNum == currentPageNum) {

return;

} else {

currentPageNum = pageNum;

}

var data = "pageNum=" + pageNum;

$.ajax({

type : "POST",

async : true,

url : "GetResult",

data : data,

dataType : "JSON",

success : function(datas) {

var theDatas = JSON.parse(datas);

createList(theDatas.resultsList);

createPages(currentPageNum, pageSum, 10);

bindEventForPageDiv();

}

});

}

//为生成的PageDiv绑定事件

function bindEventForPageDiv() {

$("#paging div").each(function(i, aPageDiv) {

var aPageDiv = $(aPageDiv);

var pageNum = aPageDiv.attr("pageNum");

aPageDiv.click(function() {

pageClick(pageNum);

});

});

}

function createPages(V_currentPageNum, V_pageSum, V_pageSize) {

//获得pageDiv对象

var pageDiv = $("#paging");

//首先将其清空

$("#paging").empty();

//生成首页

var shouYe = '<div class="twoWords" pageNum='+1+'>首页</div>';

pageDiv.append(shouYe);

//生成上一页

if (V_currentPageNum != 1) {

var prePageNum = Math.abs(V_currentPageNum) - 1;

var prePage = '<div class="threeWords" pageNum=' + prePageNum + '>上一页</div>';

pageDiv.append(prePage);

}

//生成当前页的前五页

for ( var i = V_currentPageNum - 5; i < V_currentPageNum; i++) {

if (i <= 0) {

continue;

}

var aPageDiv = "<div class='pageNumberDiv' pageNum="+ i +">" + i

+ "</div>";

pageDiv.append(aPageDiv);

}

//生成当前页

var currPage = "<div class='currentPageNumberDiv' pageNum=" + V_currentPageNum + ">"

+ V_currentPageNum + "</div>";

pageDiv.append(currPage);

//生成当前页的后五页

var startNum = Math.abs(V_currentPageNum) + 1;

var endNum = Math.abs(V_currentPageNum) + 5;

for ( var i = startNum; i < endNum; i++) {

if (i > V_pageSum) {

continue;

}

var aPageDiv = "<div class='pageNumberDiv' pageNum="+ i +">" + i

+ "</div>";

pageDiv.append(aPageDiv);

}

//生成下一页

if (V_currentPageNum != V_pageSum) {

var nextPageNum = 1 + Math.abs(V_currentPageNum);

var prePage = '<div class="threeWords" pageNum=' + nextPageNum + '>下一页</div>';

pageDiv.append(prePage);

}

//生成末页

var moYe = '<div class="twoWords" pageNum='

+ V_pageSum + '>末页</div>';

pageDiv.append(moYe);

var fontTag = "<font class='pageCount'>共"+V_pageSum+"页</font>";

pageDiv.append(fontTag);

}

//对json对象objs遍历，然后输出到网页上

function createList(objs) {

$("#datas").empty();

$.each(objs, function(i, li) {

var tr = [ '<div class="item">', '<div class="title">',

'<a href="'+li.url+'" target="blank">', li.title, '</a>',

'</div>', '<div class="url">',

'<a href="'+li.url+'" target="blank">', li.url, '</a>',

'</div>', '<div class="summary">', li.summary, '</div>',

'<div class="time">', li.time, '</div>', '</div>' ]

.join('');

$("#datas").append(tr);

});

}

</script>