【Ajax】基于Jquery+Ajax+Json实现分页显示附效果图-Json-分页

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【基于Jquery+Ajax+Json实现分页显示附效果图】，下面是详细的讲解！

基于Jquery+Ajax+Json实现分页显示附效果图

function getJSONData(pn) { 
// alert(pn); 
$.getJSON("blackList.ce", function(data) { 
var totalCount=data.totalCount; // 总记录数 
var pageSize=10; // 每页显示几条记录 
var pageTotal=Math.ceil(totalCount / pageSize); // 总页数 
var startPage=pageSize * (pn - 1); 
var endPage=startPage + pageSize - 1; 
var $ul=$("#json-list"); 
$ul.empty(); 
for (var i=0; i < pageSize; i++) { 
$ul.append('<li class="li-tag"></li>'); 
} 
var dataRoot=data.jsonRoot; 
if (pageTotal==1) { // 当只有一页时 
for (var j=0; j < totalCount; j++) { 
$(".li-tag").eq(j).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>") 
.append("<span class='col2'>" + parseInt(j + 1) 
+ "</span>").append("<span class='col3'>" + dataRoot[j].mobile 
+ "</span>").append("<span class='col4'>" + dataRoot[j].province 
+ "</span>").append("<span class='col5'>" + dataRoot[j].gateway 
+ "</span>").append("<span class='col6'>" + dataRoot[j].insertTime 
+ "</span>").append("<span class='col7'>" + dataRoot[j].remark 
+ "</span>") 
} 
} else { 
for (var j=startPage, k=0; j < endPage, k < pageSize; j++, k++) { 
if( j==totalCount){ 
break; // 当遍历到最后一条记录时，跳出循环 
} 
$(".li-tag").eq(k).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>") 
.append("<span class='col2'>" + parseInt(j + 1) 
+ "</span>").append("<span class='col3'>" + dataRoot[j].mobile 
+ "</span>").append("<span class='col4'>" + dataRoot[j].province 
+ "</span>").append("<span class='col5'>" + dataRoot[j].gateway 
+ "</span>").append("<span class='col6'>" + dataRoot[j].insertTime 
+ "</span>").append("<span class='col7'>" + dataRoot[j].remark 
+ "</span>") 
} 
} 
$(".page-count").text(pageTotal); 
}) 
} 
function getPage() { 
$.getJSON("blackList.ce", function(data) { 
pn=1; 
var totalCount=data.totalCount; // 总记录数 
var pageSize=10; // 每页显示几条记录 
var pageTotal=Math.ceil(totalCount / pageSize); // 总页数 
$("#next").click(function() { 
if (pn==pageTotal) { 
alert("后面没有了"); 
pn=pageTotal; 
} else { 
pn++; 
gotoPage(pn); 
} 
}); 
$("#prev").click(function() { 
if (pn==1) { 
alert("前面没有了"); 
pn=1; 
} else { 
pn--; 
gotoPage(pn); 
} 
}) 
$("#firstPage").click(function() { 
pn=1; 
gotoPage(pn); 
}); 
$("#lastPage").click(function() { 
pn=pageTotal; 
gotoPage(pn); 
}); 
$("#page-jump").click(function(){ 
if($(".page-num").val() <=pageTotal && $(".page-num").val() !=''){ 
pn=$(".page-num").val(); 
gotoPage(pn); 
}else{ 
alert("您输入的页码有误！"); 
$(".page-num").val('').focus(); 
} 
}) 
$("#firstPage").trigger("click"); 

}) 
} 
function gotoPage(pn) { 
// alert(pn); 
$(".current-page").text(pn); 
getJSONData(pn) 
} 

$(function() { 
getPage(); 
})

关于基于Jquery+Ajax+Json实现分页显示附效果图的用户互动如下：

　　相关问题：我对Jquery不是很熟，要做一个特效，使用Jquery与J...

　　答：这个效果就5分，你这是严重鄙视程序员的劳动埃 你能不能找个差不多的效果图埃 另外“但是如果我用插件，两个插件又不能一起使用，为什么”是什么意思？ 插件冲突？有基本代码的话贴代码，发代码都行。 >>详细

　　相关问题：如何实现分页效果HTML，PHP, JQUERY，如图所示

　　答：先用php将文字进行分页. 百度 按字数分页. 然后字数分页和普通的内容分页其实是一样. >>详细

　　相关问题：bootstrap-paginator+json+java+ajax实现新闻分页...

　　答：我给你个项目例子吧！ >>详细