Using jquery without refreshing paging plugin jquery.pagination.js implementation without refreshing paging effect
Friendly tip: This example handler the StringBuilder Append method to append HTML, small amount of data can, but large data or layout is often changed, it is recommended to return JSON format data, performance and flexibility is better!
1. Plug-in parameter list
2. Page Content :
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>porschev----No Refresh page </title>
<script src= "Script/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<script src= "Script/jquery.pagination.js" type= "Text/javascript" ></script>
<script src= "Script/tablecloth.js" type= "Text/javascript" ></script>
<link href= "Style/tablecloth.css" rel= "stylesheet" type= "Text/css"/>
<link href= "Style/pagination.css" rel= "stylesheet" type= "Text/css"/>
<script type= "Text/javascript" >
var pageIndex = 0; Page Index Initial value
var pageSize = 10; Each page shows the number of bar initialization, modify the number of display bar, modify this can be
$ (function () {
Inittable (0); Load event, initialization table data, page index 0 (first page)
Paging, PageCount is the total number of entries, this is a required parameter, the other parameters are optional
$ ("#Pagination"). Pagination (<%=pagecount%>, {
Callback:pagecallback,
Prev_text: ' prev ',//prev button text
Next_text: ' next page ',///Next button inside text
Items_per_page:pagesize,//Display bar count
Num_display_entries:6////////////page number of pages
Current_page:pageindex,//Current page index
num_edge_entries:2//number of page entries on both ends of the two sides
});
Page Call
function Pagecallback (index, JQ) {
Inittable (index);
}
Request data
function Inittable (pageIndex) {
$.ajax ({
Type: "POST",
DataType: "Text",
URL: ' handler/pagerhandler.ashx ',//submit to general handler request data
Data: "pageindex=" + (PageIndex + 1) + "&pagesize=" + pageSize,//Submit two parameters: PageIndex (page index), pageSize (display number of bars)
Success:function (data) {
$ ("#Result tr:gt (0)"). Remove (); Remove the rows from the table with the ID result, starting with the second line (here varies by page layout)
$ ("#Result"). Append (data); Append the returned data to the table
}
});
}
});
</script>
<body>
<div align= "center" >
</div>
<div id= "Container" >
<table id= "result" cellspacing= "0" cellpadding= "0" >
<tr>
<th> number </th>
<th> name </th>
</tr>
</table>
<div id= "Pagination" ></div>
</div>
</body>
3. Page. cs file Content：
Copy Code code as follows:
Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Web;
Using System.Web.UI;
Using System.Web.UI.WebControls;
public partial class _default:system.web.ui.page
{
public string PageCount = string. Empty; Total number of entries
protected void Page_Load (object sender, EventArgs e)
{
if (! IsPostBack)
{
PageCount = new Pagertestbll.personmanager (). Getpersoncount (). ToString ();
}
}
}
what's in 4.Handler：
Copy Code code as follows:
<%@ WebHandler language= "C #" class= "Pagerhandler"%>
Using System;
Using System.Web;
Using System.Collections.Generic;
Using System.Text;
public class Pagerhandler:ihttphandler {
public void ProcessRequest (HttpContext context) {
Context. Response.ContentType = "Text/plain";
String str = string. Empty;
Specific number of pages
int pageIndex;
Int. TryParse (context. request["PageIndex"], out pageIndex);
Number of page display bars
int size = Convert.ToInt32 (context. request["PageSize"]);
if (pageIndex = 0)
{
PageIndex = 1;
}
int count;
list<pagertestmodels.person> list = new Pagertestbll.personmanager (). Getallperson (Size, PageIndex, "", out count);
StringBuilder sb = new StringBuilder ();
foreach (Pagertestmodels.person p in list)
{
Sb. Append ("<tr><td>");
Sb. Append (P.id.tostring ());
Sb. Append ("</td><td>");
Sb. Append (P.name);
Sb. Append ("</td></tr>");
}
str = sb. ToString ();
Context. Response.Write (str);
}
public bool IsReusable {
get {
return false;
}
}
}
5. Realize the effect chart：
SOURCE download
