ajax 动态绑定table同时实现分页
{
$("#next").click(function(){
//总页数
var pageall =parseInt($("#lblPageCount").html());//总记录
var number=(pageall/100>parseInt(pageall/100))?parseInt(pageall/100)+1:parseInt(pageall/100);
var lblpage=$("#lblpage").html();
if(parseInt(number) ==0 || parseInt(number) ==1 || parseInt(lblpage)==parseInt(number))
{
//alert(1);
}
else
{
//上一页
$("#previous").css('color','#0000EE');
//首页
$("#first").css('color','#0000EE');
//页数
var lblpage=$("#lblpage").html();
var page=parseInt(lblpage)+1;
//
$("#lblToatl").html(parseInt(lblpage)*100+1);
$("#lblCurent").html(parseInt(lblpage)*100+100);
//第几页
$("#lblpage").html(parseInt(lblpage)+1);
var i = parseInt(lblpage)*100+1;
var whsql = $("#lblwhsql").text();
var list=$("#lbldrplist").text();
if(parseInt(page) == parseInt(number) )
{
$("#next").css('color','#999999');
$("#last").css('color','#999999');
$("#lblCurent").html(pageall);
}
BindTable(whsql,list,page,i);
}
});
//上一页
$("#previous").click(function(){
//下一页
var lblpage=$("#lblpage").html();
if(parseInt(lblpage)==1)
{}
else
{
//下一页
$("#next").css('color','#0000EE');
//末页
$("#last").css('color','#0000EE');
var page=parseInt(lblpage)-1;
var i = parseInt(page-1)*100+1;
$("#lblToatl").html(parseInt(page-1)*100+1);
$("#lblCurent").html(parseInt(page-1)*100+100);
$("#lblpage").html(page);
if(page==1)
{
$("#previous").css('color','#999999');
//首页
$("#first").css('color','#999999');
$("#lblToatl").html(1);
$("#lblCurent").html(100);
$("#lblpage").html(1);
}
var whsql = $("#lblwhsql").text();
var list=$("#lbldrplist").text();
BindTable(whsql,list,page,i);
}
});
//首页
$("#first").click(function(){
var lblpage=$("#lblpage").html();
if(parseInt(lblpage)==1)
{}
else
{
$("#last").css('color','#0000EE');
$("#next").css('color','#0000EE');
$("#previous").css('color','#999999');
$("#first").css('color','#999999');
$("#lblToatl").html(1);
$("#lblCurent").html(100);
$("#lblpage").html(1);
var page=1;
var i=1;
var whsql = $("#lblwhsql").text();
var list=$("#lbldrplist").text();
BindTable(whsql,list,page,i);
}
});
//末页
$("#last").click(function(){
//总页数
var pageall =parseInt($("#lblPageCount").html());//总记录
var number=(pageall/100>parseInt(pageall/100))?parseInt(pageall/100)+1:parseInt(pageall/100);
var lblpage=$("#lblpage").html();
if(parseInt(number)==0 || parseInt(number)==1 || parseInt(lblpage)==parseInt(number))
{
//alert(number);
}
else
{
$("#next").css('color','#999999');
$("#previous").css('color','#0000EE');
$("#last").css('color','#999999');
$("#first").css('color','#0000EE');
$("#lblToatl").html(parseInt(number-1)*100+1);
$("#lblCurent").html(pageall);
//第几页
$("#lblpage").html(number);
var i = parseInt(number-1)*100+1;
var whsql = $("#lblwhsql").text();
var list = $("#lbldrplist").text();
var page = number;
BindTable(whsql,list,page,i);
}
});
$("#btnSub").click(function(){
$("#showTop").css('display','none');
$("#headTab").css('display','block');
$("#divShield").css('display','none');
$("#Pipage").css('display','block');
//下一页
$("#next").css('color','#0000EE');
//末页
$("#last").css('color','#0000EE');
//上一页
$("#previous").css('color','#999999');
//首页
$("#first").css('color','#999999');
$("#lblToatl").html(1);
$("#lblCurent").html(100);
$("#lblpage").html(1);
$("#tabRept").empty();
var i=1;
var whsql="";
whsql=" dTimeCenter >='" + $("#txtStart").val() + " 00:00:00" + "' and dTimeCenter<='" + $("#txtEnd").val() +" 23:59:59"+ "' ";
$("#lblwhsql").html(whsql);
$("#lbldrplist").html($("#drplist").val());
BindTable(whsql,$("#drplist").val(),1,i);
});
});
//分页
function BindTable(whsql,list,page,i)//whsql 传递的查询条件 list我需要的一个传值 page是页数 1第几页用来绑定的 后台分页只需要page
{
$("#loading").css('display','inline-block');
$("#dtab").css('display','none');
$("#divtab").css('display','inline-block');
$("#tabRept").empty();
$.ajax({
type:"post",//请求方式
url: encodeURI(encodeURI("pageReportName?iType=8&whsql="+whsql+"&drplist="+list+"&page="+page)),
success:function(data)
{
var jsonstr=eval("("+data+")");
$("#lblPageCount").html(jsonstr[0].total);
var pageall =parseInt(jsonstr[0].total);//总记录
var number=(pageall/100>parseInt(pageall/100))?parseInt(pageall/100)+1:parseInt(pageall/100);
$("#lblALLpage").html(number);
var jsonData=jsonstr[0].rows;
if(parseInt(list)==0)
{
$("#tbo").css('display','none');
$("#tabRept").append("
for(var key in jsonData)
{
$("#tabRept").append("
i++;
}
}
else
{
$("#tbo").css('display','block');
$("#tabRept").append("
for(var key in jsonData)
{
$("#tabRept").append("
i++;
}
$("#tbo").removeAttr("style");
}
$("#loading").css('display','none');
$("#dtab").css('display','inline-block');
$("#divtab").css('display','none');
}
});
}
----------------------------------------------以上js----------------------------
--界面--
| 责任人 | 主机名 | 单位名称 | 部门名称 | 当前用户名 | 报警等级 | 本地时间 | 中心时间 | 审计类型 | 原IP | 新IP | 子中心IP |
|---|
---------因为要固定表头，表th固定表头的写法，这中分页方式可参考比较特殊慎用---------
