Home > Developer > Web Develop
First, there are a few notes: 1. The article is. NET paging with Ajax.
2. Novice road, only for reference, pro-test effective
3. The code is a bit cumbersome, repetitive, just written out to send out
This is the main page code, created an ASPX suffix file, the name is Default.aspx
<%@ page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "new Folder 1_default"%>
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<script src= ". /admin/js/ajaxxmlhttp.js "></script>//if copied directly, the path here may be different and need to be redefined
<script src= ". /admin/js/jquery-1.10.2.min.js "></script>
<script>
Window.onload = function () {
var pageindex = 1;
var pagesize = 10;
Createxml ();
Xmlhttp.open ("Get", "handler.ashx?pageindex=" +pageindex+ "&pagesize=" +pagesize);
Xmlhttp.onreadystatechange = function () {
if (Xmlhttp.status = = && Xmlhttp.readystate = = 4) {
var tab = Xmlhttp.responsetext;//tab value refers to the total number of data in the table and table
var table = tab.substring (0, tab.length-8);//-8 is to prevent too much data
var datacount = tab.substring (tab.length-8). Trim ();//Total data in order to determine the number of pages
if (datacount% pagesize = = 0)//Find out the number of pages
PageCount = datacount/pagesize;
Else
PageCount = Math.floor (datacount/pagesize) + 1;
document.getElementById ("D1"). InnerHTML = table;
document.getElementById ("Hidden1"). Value = pagecount;//The number of pages to Hidden1
$ ("Table Tr:odd"). CSS ("Background", "#fff");
}
}
Xmlhttp.send ();
Home
document.getElementById ("Button1"). onclick = function () {
pageindex = 1;
Xmlhttp.open ("Get", "handler.ashx?pageindex=" + pageindex + "&pagesize=" + pagesize);
Xmlhttp.onreadystatechange = function () {
if (Xmlhttp.status = = && Xmlhttp.readystate = = 4) {
var tab = Xmlhttp.responsetext;
var table = tab.substring (0, tab.length-8);
document.getElementById ("D1"). InnerHTML = table;
$ ("Table Tr:odd"). CSS ("Background", "#fff");
}
}
Xmlhttp.send ();
}
Previous page
document.getElementById ("Button2"). onclick = function () {
pageindex-= 1;
if (pageindex < 1)
{
pageindex = 1;
}
Xmlhttp.open ("Get", "handler.ashx?pageindex=" + pageindex + "&pagesize=" + pagesize);
Xmlhttp.onreadystatechange = function () {
if (Xmlhttp.status = = && Xmlhttp.readystate = = 4) {
var tab = Xmlhttp.responsetext;
var table = tab.substring (0, tab.length-8);
document.getElementById ("D1"). InnerHTML = table;
$ ("Table Tr:odd"). CSS ("Background", "#fff");
}
}
Xmlhttp.send ();
}
Next page
document.getElementById ("Button3"). onclick = function () {
pageindex + = 1;
Pageindex1 = document.getElementById ("Hidden1"). value;//remove the number of pages from the HIDDEN1
if (pageindex >= pageindex1)//If the current page is greater than the number of pages, it is divided into pages
pageindex = Pageindex1;
Xmlhttp.open ("Get", "handler.ashx?pageindex=" +pageindex+ "&pagesize=" +pagesize);
Xmlhttp.onreadystatechange = function () {
if (Xmlhttp.status = = && Xmlhttp.readystate = = 4) {
var tab = Xmlhttp.responsetext;
var table = tab.substring (0, tab.length-8);
document.getElementById ("D1"). InnerHTML = table;
$ ("Table Tr:odd"). CSS ("Background", "#fff");
}
}
Xmlhttp.send ();
}
Last
document.getElementById ("Button4"). onclick = function () {
pageindex = document.getElementById ("Hidden1"). value;//the current page is equal to the number of pages
Xmlhttp.open ("Get", "handler.ashx?pagesize=" + pagesize+ "&pageindex=" +pageindex);
Xmlhttp.onreadystatechange = function () {
if (Xmlhttp.status = = && Xmlhttp.readystate = = 4) {
var tab = Xmlhttp.responsetext;
var table = tab.substring (0, tab.length-8);
document.getElementById ("D1"). InnerHTML = table;
$ ("Table Tr:odd"). CSS ("Background", "#fff");
}
}
Xmlhttp.send ();
}
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "D1" >
</div>
<div>
<input id= "Button1" type= "button" value= "Home"/><input id= "Button2" type= "button" value= "previous"/><input ID = "Button3" type= "button" value= "Next"/><input id= "Button4" type= "button" value= "Last"/><input id= "Hidden1" Type= "hidden"/>
</div>
</form>
</body>
Here is the General Processing program page, you can copy and paste, the name is Handler.ashx
<%@ WebHandler language= "C #" class= "Handler"%>
Using System;
Using System.Web;
Using System.Linq;
public class Handler:ihttphandler {
Adminsdatacontext dc = new Adminsdatacontext ();//Use LINQ, or you can switch to SQL
public void ProcessRequest (HttpContext context) {
String index = context. request["pageindex"];
String size = context. request["pagesize"];
String type = context. request["type"];
string table = "<table rules= ' cols ' id= ' GridView1 ' style= ' Color:black;background-color:white;border-color: #DEDFDE ; border-width:1px;border-style:none;border-collapse:collapse; ' cellspacing= ' 0 ' cellpadding= ' 4 ' ><tbody> <tr style= ' color:white;background-color: #6B696B; font-weight:bold; ' ><th scope= ' col ' >zcid</th><th scope= ' col ' >zcname</th></tr> ";
var result = from X in dc.zhuclass//linq query data
Select X;
Result. Skip (10);//Skip 10 data return remaining data
Result. Take (10);//return 10 data
int pageindex = Int. Parse (index);
int pagesize = Int. Parse (size);
var a = result. Skip ((pageindex-1) * pagesize). Take (pagesize);
foreach (Var z in a)
{
Table + = "<tr style= ' background-color: #F7F7DE; ' ><td> "+ z.zcid +" </td><td> "+ z.zcname +" </td></tr> ";
}
Table + = "</tbody></table>";
Context. Response.Write (table + "" +result. Count ());//space is added here to prevent too much data volume
}
public bool IsReusable {
get {
return false;
}
}
}
<script src= ". /admin/js/ajaxxmlhttp.js "></script> Create a JS file
What's Inside:
var xmlhttp;
function Createxml () {
try {
XMLHTTP = new XMLHttpRequest ();
}
catch (e) {
try{
XMLHTTP = new ActiveXObject ("MSXML2. XMLHTTP ");
}
catch (E1) {
XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP");
}
}
return XMLHTTP;
}
HTML Paging with Ajax
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
