如何用ajax的dll来实现 datagird的分页

Question

如何用ajax的dll来实现 datagird的分页 请高手指教？

Answer 1

    var arr = new Array();
function GetData()
{
if(Form1.txtName.value == "" && Form1.txtTel.value == "")
{
alert("至少要添加一个查询条件!");
return;
}
arr.length = 0;
    arr.push(Form1.txtName.value);
    arr.push(Form1.txtTel.value);
    
    fySign = 1;
    iCurrPage = 1;
    QuerySplit();
}
//查询 （分页）
function QuerySplit()
{
showimg();
Query();
}
function Query()
{     
var ds = huiyuan.QueryOtherInfo.Query(arr, iCurrPage).value;
if(ds != null)
{
if(ds.Tables[2] != null)
{
var dt = ds.Tables[2];
var tbl = document.getElementById("DataTable");
var j = 0;
if(tbl.rows.length > 1)
{
for( j=tbl.rows.length-1; j>0; j--) 
{   
tbl.deleteRow(j);   
}
}

for(var i=0; i<dt.Rows.length; i++)
{
var row = tbl.insertRow();

if(i % 2 == 1)
{
row.style.backgroundColor = "#D3E7FF";
}
else
{
row.style.backgroundColor = "#ffffff";
}
var cell = row.insertCell();
if(dt.Rows[i].iCustomerID != "" && dt.Rows[i].iCustomerID != null)
cell.innerHTML = "<a id='" + dt.Rows[i].iCustomerID + "' href='#' onclick='GetCustomerID(this.id)'>选择</a>";

var cell1 = row.insertCell();
cell1.align = "center";
cell1.noWrap = true;
if(dt.Rows[i].cAssociatorID != "" && dt.Rows[i].cAssociatorID != null)
cell1.innerText = dt.Rows[i].cAssociatorID;//innerText
else
cell1.innerHTML = "&nbsp;";

var cell2 = row.insertCell();
cell2.align = "center";
cell2.noWrap = true;
if(dt.Rows[i].cCustomerName != "" && dt.Rows[i].cCustomerName != null)
cell2.innerHTML = dt.Rows[i].cCustomerName
else
cell2.innerHTML = "&nbsp;";

var cell3 = row.insertCell();
cell3.align = "center";
cell3.noWrap = true;
if(dt.Rows[i].bSex)
cell3.innerHTML = "男"
else
cell3.innerHTML = "女";

var cell4 = row.insertCell();
cell4.align = "center";
cell4.noWrap = true;
if(dt.Rows[i].iAge != "-1")
cell4.innerHTML = dt.Rows[i].iAge
else
cell4.innerHTML = "&nbsp;";

var cell5 = row.insertCell();
cell5.align = "center";
cell5.noWrap = true;
if(dt.Rows[i].dBirthday != "1900-01-01")
cell5.innerHTML = dt.Rows[i].dBirthday;
else
cell5.innerHTML = "&nbsp;";

var cell6 = row.insertCell();
cell6.align = "center";
cell6.noWrap = true;
if(dt.Rows[i].cAddress != "" && dt.Rows[i].cAddress != null)
cell6.innerHTML = dt.Rows[i].cAddress
else
cell6.innerHTML = "&nbsp;";

var cell7 = row.insertCell();
cell7.align = "center";
cell7.noWrap = true;
if(dt.Rows[i].cMobile != "" && dt.Rows[i].cMobile != null)
cell7.innerHTML = dt.Rows[i].cMobile;
else
cell7.innerHTML = "&nbsp;";

var cell8 = row.insertCell();
cell8.align = "center";
cell8.noWrap = true;
if(dt.Rows[i].cTelephone != "" && dt.Rows[i].cTelephone != null)
cell8.innerHTML = dt.Rows[i].cTelephone
else
cell8.innerHTML = "&nbsp;";

var cell9 = row.insertCell();
cell9.align = "center";
cell9.noWrap = true;
if(dt.Rows[i].cIDCardNum != "" && dt.Rows[i].cIDCardNum != null)
cell9.innerHTML = dt.Rows[i].cIDCardNum;
else
cell9.innerHTML = "&nbsp;";

var cell10 = row.insertCell();
cell10.align = "center";
cell10.noWrap = true;
if(dt.Rows[i].cMetier != "" && dt.Rows[i].cMetier != null)
cell10.innerHTML = dt.Rows[i].cMetier
else
cell10.innerHTML = "&nbsp;";

}
if(fySign == 1)
{
if(ds.Tables[1] != null)
{
var dt = ds.Tables[1];
if(parseInt(dt.Rows[0].allPageCount)==0 || parseInt(dt.Rows[0].allPageCount)==1)
{

document.getElementById("currPage").innerText = "1";
document.getElementById("countPage").innerText = "1";
setBackState(false);
setNextState(false);
Form1.btnGo.disabled = true;
}
else
{
document.getElementById("currPage").innerText = "1";
document.getElementById("countPage").innerText = parseInt(dt.Rows[0].allPageCount);
setBackState(false);
setNextState(true);
Form1.btnGo.disabled = false;
}
document.getElementById("AllCount").innerText = parseInt(dt.Rows[0].allRows);
fySign = 0;
}
}         
}
}

document.getElementById("DataTable").width = "100%";
document.getElementById("showDiv").style.display = "none";
}

Answer 2

实现上一页   下一页
////////////////////////////////////////////////////////////////////////////////////////////////////
//该分页需要配合 CSS 、 特定 showDiv（友好图）以及 导航按钮样式组 使用。
//
/////////////////// showDiv (友好图) //////////////////////////////////////////////////////////////////
//<div id="showDiv" align="center" style="DISPLAY: none; Z-INDEX: 101; POSITION: absolute" tabIndex="0">
// <IMG id="laod" alt="" src="images/loading.gif">
//</div>
///////////////////// CSS 样式 ///////////////////////////////////////////////////////////
//.disabled 
// {
// cursor:default;
// }
// .enabled  
// {
// cursor:hand
// }
/////////////////////  导航按钮样式组 /////////////////////////////////////////////////////////////////////////////////////
//<td class="td" align="center" colSpan="4">
// <IMG onclick="turnPage(this)" class="disabled" id="BackLast" alt="首页" src="images/navigationImages/firstg.gif">
// <IMG onclick="turnPage(this)" class="disabled" id="Back" alt="上一页" src="images/navigationImages/prevg.gif">
// <FONT face="宋体">&nbsp;</FONT> <FONT face="宋体" id="currPage">1</FONT> <FONT face="宋体">
// /</FONT> <FONT face="宋体" id="countPage">1</FONT> <FONT face="宋体">&nbsp; </FONT>
// <IMG onclick="turnPage(this)" class="enabled" id="Next" alt="下一页" src="images/navigationImages/nextn.gif">
// <IMG onclick="turnPage(this)" class="enabled" id="NextLast" alt="最后一页" src="images/navigationImages/lastn.gif">
// &nbsp;共<FONT id="AllCount" face="宋体"></FONT>条数据 </FONT><FONT face="宋体">&nbsp;</FONT>
// <input id="txtTurnTo" style="WIDTH: 46px; HEIGHT: 22px" type="text"> <input id="btnGo" type="button" value="GO" onclick="turnPage(this)">
//</td>
///////////////////////////////////////////////////////////////////////////////////////////////////var iCurrPage = 1;
var fySign = 1;
//显示友好图
function showimg()
{
var a = document.getElementById("showDiv");
a.style.display = "block";
a.style.left = (document.body.clientWidth/2 - a.clientWidth/2) + "px";
a.style.top = (document.body.scrollTop + document.body.clientHeight/2 - a.clientHeight/2) + "px";
}//变换右分页样式
function setNextState(sign)
{
if(sign)
{
Form1.Next.src = "images/navigationImages/nextn.gif";
Form1.NextLast.src = "images/navigationImages/lastn.gif";
Form1.Next.className = 'enabled';
Form1.NextLast.className = 'enabled';
}
else
{
Form1.Next.src = "images/navigationImages/nextg.gif";
Form1.NextLast.src = "images/navigationImages/lastg.gif";
Form1.Next.className = 'disabled';
Form1.NextLast.className = 'disabled';
}
}
//变换左分页样式
function setBackState(sign)
{
if(sign)
{
Form1.Back.src = "images/navigationImages/prevn.gif";
Form1.BackLast.src = "images/navigationImages/firstn.gif";
Form1.Back.className = 'enabled';
Form1.BackLast.className = 'enabled';
}
else
{
Form1.Back.src = "images/navigationImages/prevg.gif";
Form1.BackLast.src = "images/navigationImages/firstg.gif";
Form1.Back.className = 'disabled';
Form1.BackLast.className = 'disabled';
}
}//分页
function turnPage(contrl)
{
var tempNum = 1;
var sign = true;
if(!check(contrl))
return;
switch(contrl.id)
{
case 'Next':
tempNum = parseInt(document.getElementById("currPage").innerText) + 1;
if(tempNum == document.getElementById("countPage").innerText)
{
setNextState(false);
}
setBackState(true);
break;
case 'NextLast':
tempNum = document.getElementById("countPage").innerText;
setNextState(false);
setBackState(true);
break;
case 'Back':
tempNum = document.getElementById("currPage").innerText - 1;
if(tempNum == 1)
{
setBackState(false);
}
setNextState(true);
break;
case 'BackLast':
setNextState(true);
setBackState(false);
break;
case 'btnGo':
tempNum = document.getElementById("txtTurnTo").value;
sign = ChangeTo(tempNum);
if(sign)
{
if(tempNum == 1)
{
setNextState(true);
setBackState(false);
}
else if(tempNum == parseInt(document.getElementById("countPage").innerText))
{
setNextState(false);
setBackState(true);
}
else
{
setNextState(true);
setBackState(true);
}
}
break;
default:
break;
}
if(sign)
{
document.getElementById("currPage").innerText = tempNum;
iCurrPage = tempNum;
QuerySplit();
}
}//GO 验证
function ChangeTo(values)
{
var reg = /^\+?(0|[1-9][0-9]*)$/; 
var r = values.match(reg); 
if(r == null)
{ 
alert("请输入 0 或 正整数");
return false;
}
if(values<=0 || values>parseInt(document.getElementById("countPage").innerText))
{
alert('查询页超出页面范围，请重新输入！');
return false;
}
else
{
return true;
}
}
//验证按钮可用性
function check(contrl)
{
if(contrl.className == 'enabled' || contrl.className == "")
return true;
else
return false;
}

Answer 3

后台根据条件  调用分页存储过程
[AjaxPro.AjaxMethod]
public DataSet Query(ArrayList arr,int iCurrPage)
{ 
cUserInfoModel userInfo = new cUserInfoModel();
userInfo.cCustomerName = arr[0].ToString().Trim();
userInfo.cMobile = arr[1].ToString().Trim();
DataSet ds = this.m_userInfoLogic.QueryAssociatorInfo(userInfo, iCurrPage); if(userInfo.strError != "")
{
return null;
}
else
{
return ds;
}
}