Home > Developer > JavaScript
First look:
The implementation principle is very simple. The jquery. pagination plug-in is used. When you click the page number, the data on the page is asynchronously retrieved from the server. The following is a brief introduction:
I. database table structure: the four fields are News_id News_title News_time News_readtimes.
Ii. Front-end Page code:
Copy codeThe Code is as follows:
<Head runat = "server">
<Title> JQuery refreshing pagination </title>
<Link href = "Styles/common.css" rel = "stylesheet" type = "text/css"/>
<Link href = "Styles/paging.css" rel = "stylesheet" type = "text/css"/>
<Script src = "Scripts/jquery-1.4.1.js" type = "text/javascript"> </script>
<Script src = "Scripts/jquery. pagination. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var pageIndex = 0;
Var pageSize = 3;
$ (Function (){
InitTable (0 );
$ ("# Pagination"). pagination (<% = pageCount %> ,{
Callback: PageCallback,
Prev_text: 'previous page ',
Next_text: 'Next page ',
Items_per_page: pageSize,
Num_display_entries: 6, // Number of pagination entries in the main part of a consecutive page
Current_page: pageIndex, // index of the current page
Num_edge_entries: 2 // number of entries at the beginning and end of each side
});
// Paging call
Function PageCallback (index, jq ){
InitTable (index );
}
// Request data
Function InitTable (pageIndex ){
$. Ajax ({
Type: "POST ",
DataType: "text ",
Url: 'ajax/PagerHandler. ashx ',
Data: "pageIndex =" + (pageIndex + 1) + "& pageSize =" + pageSize,
Success: function (data ){
$ ("# Result tr: gt (0 )"). remove (); // remove the rows in the table whose Id is Result, starting from the second row (this is changed according to the page layout)
$ ("# Result"). append (data); // append the returned data to the table.
}
});
}
});
</Script>
</Head>
Copy codeThe Code is as follows:
<Form id = "form1" runat = "server">
<Center>
<Table id = "Result" border = "1" cellpadding = "5" style = "border-collapse: collapse; margin: 20px;
Border: solid 1px # 85A8BE; width: 60% ">
<Tr>
<Th style = "width: 10%">
ID
</Th>
<Th style = "width: 60%">
Title
</Th>
<Th style = "width: 20%">
Update Time
</Th>
<Th style = "width: 10%">
Clicks
</Th>
</Tr>
</Table>
<Div id = "Pagination" class = "paging">
</Div>
</Center>
</Form>
3. Page background files
Here we mainly obtain the total number of records:
Copy codeThe Code is as follows:
Public string pageCount = string. Empty; // total number of entries
Protected void Page_Load (object sender, EventArgs e)
{
If (! IsPostBack)
{
PageCount = new News (). GetNewsCount ();
}
}
4. The main ajax processing program is PagerHandler. ashx.
Copy codeThe Code is as follows:
Public class PagerHandler: IHttpHandler
{
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
String str = string. Empty;
Int pageIndex = Convert. ToInt32 (context. Request ["pageIndex"]);
Int size = Convert. ToInt32 (context. Request ["pageSize"]);
If (pageIndex = 0)
{
PageIndex = 1;
}
Int count = 0;
News n = new News ();
List <News> list = n. GetNewsList (pageIndex, size, ref count );
StringBuilder sb = new StringBuilder ();
Foreach (News p in list)
{
Sb. Append ("<tr> <td> ");
Sb. Append (p. News_id );
Sb. Append ("</td> <td> ");
Sb. Append ("<a href = '#'>" + p. News_title + "</a> ");
Sb. Append ("</td> <td> ");
Sb. Append (p. News_time );
Sb. Append ("</td> <td> ");
Sb. Append (p. News_readtimes );
Sb. Append ("</td> </tr> ");
}
Str = sb. ToString ();
Context. Response. Write (str );
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}
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
