ajax 动态绑定table同时实现分页

$(document).ready(function()

{

$("#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("<tr><td style=\"width:40px\"> </td><td style=\"width:120px\"> </td><td> </td><td> </td><td> </td><td style=\"width:130px\"> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>");

for(var key in jsonData)

{

$("#tabRept").append("<tr><td style=\"width:40px\">"+i+" </td><td style=\"width:120px\">" + jsonData[key].CUSERNAME + " </td><td>" + jsonData[key].CHOSTNAME + " </td><td>" + jsonData[key].CUNITNAME + " </td><td>"
+ jsonData[key].CDEPTNAME + " </td><td style=\"width:130px\">" + jsonData[key].CHOSTUSER + " </td><td>" + jsonData[key].ALARMS + " </td><td>" + jsonData[key].DTIMELOCAL + " </td><td>" + jsonData[key].DTIMECENTER + " </td><td>" + jsonData[key].STYLE
+ " </td><td>" + jsonData[key].CPOLDIP + " </td><td>" + jsonData[key].CPNEWIP + " </td></tr>");

i++;

}

}

else

{

$("#tbo").css('display','block');

$("#tabRept").append("<tr><td style=\"width:40px\"> </td><td style=\"width:120px\"> </td><td> </td><td> </td><td> </td><td style=\"width:130px\"> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>");

for(var key in jsonData)

{

$("#tabRept").append("<tr><td style=\"width:40px\">"+i+" </td><td style=\"width:120px\">" + jsonData[key].CUSERNAME + " </td><td>" + jsonData[key].CHOSTNAME + " </td><td>" + jsonData[key].CUNITNAME + " </td><td>"
+ jsonData[key].CDEPTNAME + " </td><td style=\"width:130px\">" + jsonData[key].CHOSTUSER + " </td><td>" + jsonData[key].ALARMS + " </td><td>" + jsonData[key].DTIMELOCAL + " </td><td>" + jsonData[key].DTIMECENTER + " </td><td>" + jsonData[key].STYLE
+ " </td><td>" + jsonData[key].CPOLDIP + " </td><td>" + jsonData[key].CPNEWIP + " </td><td>" + jsonData[key].CCSIP + " </td></tr>");

i++;

}

$("#tbo").removeAttr("style");

}

$("#loading").css('display','none');

$("#dtab").css('display','inline-block');

$("#divtab").css('display','none');

}

});

}

----------------------------------------------以上js----------------------------

--界面--

<div id="headTab">

<div id="dtab">

<table id="tabRept" cellpadding="0" cellspacing="0" style="table-layout:fixed;">

<tr>

<th style="width:40px"> </th>

<th style="width:120px">责任人</th>

<th>主机名</th>

<th>单位名称</th>

<th>部门名称</th>

<th style="width:130px">当前用户名</th>

<th>报警等级</th>

<th>本地时间</th>

<th>中心时间</th>

<th>审计类型</th>

<th>原IP</th>

<th>新IP</th>

<th ID="tbo">子中心IP</th>

</tr>

</table>

</div>

<div id="loading">正在加载中，请稍后...</div>

</div>

<div id="Pipage" >

<div id="Pileft">

<a id="first" href="javascript:void(0);">[首页]</a>

<a id="previous" href="javascript:void(0);">[上一页]</a>

<a id="next" href="javascript:void(0);">[下一页]</a>

<a id="last" href="javascript:void(0);">[末页]</a>

</div>

<div id="Piright">

第<lable id="lblpage">1</lable>页，显示<label id="lblToatl">1</label>到<label id="lblCurent">100</label>

，共<lable id="lblALLpage">1</lable>页<label id="lblPageCount">0</label>条记录

</div>

</div>

---------因为要固定表头，表th固定表头的写法，这中分页方式可参考比较特殊慎用---------