Home > Developer > JavaScript
Refreshing pagination can solve this problem. The video is played on it. Next, I click the next page to view comments. Currently, most websites do not need refreshing pagination.
The source code is as follows (10 records are displayed on one page ):
Four files are required.
One object file CategoryInfoModel. cs
One SqlHelper SQLHelper. cs
An AJAX server processing program PagedService. ashx
One client calls WSXFY.htm
CategoryInfoModel. cs and SQLHelper. cs I will not write any more, and I know what files it is.
The PagedService. ashx code is as follows:
Copy codeThe Code is as follows:
Using System. Web. Script. Serialization;
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
String strAction = context. Request ["Action"];
// Retrieve the number of pages
If (strAction = "GetPageCount ")
{
String strSQL = "select count (*) FROM CategoryInfo ";
Int intRecordCount = SqlHelper. ExecuteScalar (strSQL );
Int intPageCount = intRecordCount/10;
If (intRecordCount % 10! = 0)
{
IntPageCount ++;
}
Context. Response. Write (intPageCount );
} // Retrieve data of each page
Else if (strAction = "GetPageData ")
{
String strPageNum = context. Request ["PageNum"];
Int intPageNum = Convert. ToInt32 (strPageNum );
Int intStartRowIndex = (intPageNum-1) * 10 + 1;
Int intEndRowIndex = (intPageNum) * 10 + 1;
String strSQL = "SELECT * FROM (select id, CategoryName, Row_Number () OVER (order by id asc) AS rownum FROM CategoryInfo) AS t ";
StrSQL + = "WHERE t. rownum> =" + intStartRowIndex + "AND t. rownum <=" + intEndRowIndex;
DataSet ds = new DataSet ();
SqlConnection conn = SqlHelper. GetConnection ();
Ds = SqlHelper. ExecuteDataset (conn, CommandType. Text, strSQL );
List <CategoryInfoModel> categoryinfo_list = new List <CategoryInfoModel> (); // defines the object set.
For (int I = 0; I <ds. Tables [0]. Rows. Count; I ++)
{
CategoryInfoModel categoryinfo = new CategoryInfoModel ();
Categoryinfo. CategoryInfoID = Convert. ToInt32 (ds. Tables [0]. Rows [I] ["ID"]);
Categoryinfo. CategoryName = ds. Tables [0]. Rows [I] ["CategoryName"]. ToString ();
Categoryinfo_list.Add (categoryinfo );
}
JavaScriptSerializer jss = new JavaScriptSerializer ();
Context. Response. Write (jss. Serialize (categoryinfo_list); // Serialize an object set to a javascript Object
}
}
The WSXFY.htm code is as follows:
Copy codeThe Code is as follows:
<Head>
<Title> refreshing pagination </title>
<Script type = "text/javascript" src = "../Scripts/jquery-1.5.1.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
$. Post ("PagedService. ashx", {"Action": "GetPageCount"}, function (response, status ){
For (var I = 1; I <= response; I ++ ){
Var td = $ ("<td> <a href =''> "+ I +" </a> </td> ");
$ ("# TrPage"). append (td );
Td. click (function (e ){
E. preventDefault (); // do not direct the link
$. Post ("PagedService. ashx", {"Action": "GetPageData", "PageNum": $ (this). text ()}, function (response, status ){
Var categorys = $. parseJSON (response );
$ ("# UlCategory"). empty ();
For (var I = 0; I <categorys. length; I ++ ){
Var category = categorys [I];
Var li = $ ("<li>" + category. CategoryInfoID + "-" + category. CategoryName + "</li> ");
$ ("# UlCategory"). append (li );
}
});
});
}
});
});
</Script>
</Head>
<Body>
<Ul id = "ulCategory"> </ul>
<Table>
<Tr id = "trPage">
</Tr>
</Table>
</Body>
</Html>
The effect is as follows (the page looks good depending on the level of DOM you have drawn. I just painted it here)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
