静态分页 ajajx +json

最新推荐文章于 2022-10-28 18:43:27 发布

转载最新推荐文章于 2022-10-28 18:43:27 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/taohome/p/5078799.html

文章标签：

#json

本文详细介绍了如何使用JavaScript实现分页操作及页面跳转功能，包括总页数显示、当前页切换、分页操作触发的事件处理等核心步骤。通过实例代码展示，帮助开发者快速理解并应用到实际项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function()
{
//总页数
var totalPage=$("#totalPage").html();
//获取页面信息
var everPage=$("#everPage").html();
var currentPage=$("#currentPage").html();
var totalCount=$("#totalCount").html();

//选择当前页设置
for(var i=1;i<=totalPage;i++){

$("#currentSelect").append
("<option value="+i+">"+i+"</option>")
}

//点击当前页事件
$("#currentbt").dblclick(function(){

$("#currentPage").hide();
$("#currentSelect").show();
})

//选择当前页change事件
$("#currentSelect").change(function(){
var currentPage=$(this).val();
//设置当前页
$("#inCurrent").val(currentPage);
//控制页面跳转
$("#pagefrom").submit();

})

//分页操作
$("#pagetable th").click(function(e)
{
//获取点击元素ID
var activeTd=$(this).attr("id");

//是否有下一页
var pageDown=$("#pageDown").html();

//是否有上一页
var pageUp=$("#pageUp").html();
//下一页
if(activeTd=="pageDownbt"&&pageDown=="true")
{
$("#usertable td").html("");
currentPage++;
pageOperate();
}
//上一页
if(activeTd=="pageUpbt"&&pageUp=="true")
{
$("#usertable td").html("");
currentPage--;
pageOperate();
}

});

/********************** 页面操作方法strat***********/
function pageOperate()
{
//ajax post传值到后台
$.post("pageUp", { everPage:everPage,currentPage:currentPage,totalCount:totalCount},
function(data)
{
//解析json 数据串
var dataObj=$.parseJSON(data);

//获取userJson
var jsonuser = dataObj.userinfo;

//获取pageJson
var jsonPage=dataObj.page;

//更新page 数据
$("#currentPage").html(jsonPage.currentPage);
$("#pageUp").html(jsonPage.pageUp);
$("#pageDown").html(jsonPage.pageDown);

//将json 数据重新铺在table上
for(var i=0;i<totalCount;i++)
{
$(".td1").eq(i).html(jsonuser[0][i].username);
$(".td2").eq(i).html(jsonuser[0][i].password);
$(".td3").eq(i).html(jsonuser[0][i].truename);
$(".td4").eq(i).html(jsonuser[0][i].job);
$(".td5").eq(i).html(jsonuser[0][i].power);
}
});
}
/********************** 页面操作方法end***********/