Today I saw a. Java Buddy wrote the program code to request a list of data directly on the page. It is the ability to list other contact lists without a refreshed pop-up div after the customer contact has been selected. It suddenly occurred to me that since you can request a list of contacts and no refreshes. So take a complex list of data, and then think of data paging. I'm using a paging control I wrote myself. But the efficiency is sometimes not very high, it is the user control + stored procedures + pagination processing class to achieve paging. But the unavoidable encounter of the refresh problem even if the page is very fast, but as long as the "brush" always feel very uncomfortable. and also want the page compiles again, also want to handle viewstate in the service side. and other performance losses. Since. ASHX can omit the process of page compilation. And then move the paging class to the client, it should be a lot of performance improvement, has not been refreshed, must be very cool, think about doing.
My idea is:. Ashx program, write a program to get different page numbers. On the premise of good page layout, leave the data area Div. Then on the page request. ASHX program generates the next page of HTML code. Cover div.innerhtml.
The first is the page, because it is to practice ideas, so the page is really very simple. Citing the Jquery.js
<div id="lab">
<input id="Button1" type="button" value="初始化数据" onclick="Init();" />
<div id="Content" style="width: 100%">
</div>
<div id="PagePanel" style="margin-left:20px"><label id="pageInfo"></label><a href="http://www.bianceng.cn/index.php#" onclick="InitUp()">Last</a> <a href="http://www.bianceng.cn/index.php#" onclick="InitNext()">Next</a></div>
<input type="hidden" value="0" id="currPageIndex" />
</div>
Then write the. js file, implement the client paging control. The current page number information is already stored on the display page a <input type= ' hidden ' >.
After the reference JS file, you can use, haha, very smooth.
JScript files
function Init ()
{
$.get ("Handler.ashx", function (TABLESTR) {
document.getElementById (' Content '). Innerhtml=tablestr;
document.getElementById (' Currpageindex '). value= ' 1 ';
});
}
function Initnext ()
{
var Currindex=document.getelementbyid (' Currpageindex '). Value;
var nextindex=number (currindex) +1;
$.get ("Nexthandler.ashx", {index:currindex},function (TABLESTR) {
document.getElementById (' Content '). Innerhtml=tablestr;
document.getElementById (' PageInfo '). innertext= "Current First" +nextindex+ "page";
document.getElementById (' Currpageindex '). Value=nextindex;
});
}
function Initup ()
{
var Currindex=document.getelementbyid (' Currpageindex '). Value;
var nextindex=number (Currindex)-1;
$.get ("Previoushandler.ashx", {index:currindex},function (TABLESTR) {
document.getElementById (' Content '). Innerhtml=tablestr;
document.getElementById (' PageInfo '). innertext= "Current First" +nextindex+ "page";
document.getElementById (' Currpageindex '). Value=nextindex;
});
}