静态分页 ajajx +json

$(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***********/

})

时间: 2024-10-26 00:46:16

静态分页 ajajx +json的相关文章

jQuery静态分页功能

分页功能在做项目的过程中是常常用到的,下面是我常用的一款分页效果: 1.分页的CSS样式(page.css) 1 #setpage { 2 margin: 15px auto; 3 text-align: center; 4 } 5 #setpage a:link,#setpage a:visited,#setpage a:hover,#setpage .current,#setpage #info{ 6 border:1px solid #DDD; 7 background:#0d6cbf;

HTML静态分页(形如:首页,上一页,下一页,尾页)

在HTML中有时候我们会用到静态分页,一次拿回一定量的数据结果条目,我们会以形如:第2页,共12页  首页 上一页 下一页 尾页 的方式进行静态分页,以下是该种静态分页的代码,供兄弟姐妹们参考. <div class="page"> <!-- a href="tosearch.jsp" target="_blank" class="blue">更多</a --> <SCRIPT typ

Highcharts 静态分页

草,为毛.先粘上代码,就不能在代码前面写字. 非要先写字,再粘代码.坑爹-- demo: new HighchartsPager('container',4, {         title: {             text: 'Monthly Average Temperature',             x: -20 //center         },         subtitle: {             text: 'Source: WorldClimate.com

项目开发笔记-传单下发 名片替换 文件复制上传/html静态内容替换/json解析/html解析

//////////////////////////// 注意: 此博客是个人工作笔记 非独立demo////////////////////////////////// ....................................................................................................................................................................

SSM_CRUD新手练习(10)返回分页的JSON数据

我们完成了员工的分页查询,但是现在这种做法只能适应浏览器和服务器的交互模式,但在移动互联网时代,客户端不仅仅只有浏览器,还有安卓和IOS客户端.我们的解决方式是AJAX+JSON方式来实现平台无关性. 所以我们现在需要改造我们的查询. 1.index,jsp页面直接发送AJAX请求进行员工分页数据的查询 2.服务器将查询的数据以JSON字符串的形式返回给浏览器 3.浏览器收到JSON字符串,可以使用js对JSON解析,使用js用过dom增删改的形式改变页面. 4.返回JSON,实现客户端的无关性

mvc PagerHelper静态分页

---------------分页方法----------------- public static class PagerHelper    {        /// <summary>        /// 分页        /// </summary>        /// <param name="helper"></param>        /// <param name="id">分页id&

Bootstrap 静态分页 和 jquery_pagination插件 动态分页

第一种Bootstrap 实例 - 默认的分页 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的分页</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src=&qu

TP5中即点即改,json分页,单删

HTML页面: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0

YAHOO.widget.DataTable 动态分页。

Server:服务器端的代码输出数据格式如下: {"total":"392","rows":[{"areaid":"1","areaname":"北京","parentid":"0","arrparentid":"0","child":"0",&qu