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,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,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','#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,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,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固定表头的写法，这中分页方式可参考比较特殊慎用---------

原文链接：https://www.f2er.com/ajax/163630.html

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

猜你在找的Ajax相关文章