標籤：2.x proc status for nat onclick ring substr toe
首先有幾點說明：1. 文章是.net 用Ajax進行分頁。
2. 新手上路，僅供參考，親測有效
3. 代碼有點繁瑣，重複，剛寫出來就發出來了
這是首頁面代碼，建立的是一個aspx尾碼檔案，名字是 Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="新檔案夾1_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../Admin/js/ajaxxmlhttp.js"></script>//如果直接複製，這裡的路徑可能不一樣，需要重新定義
<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 == 200 && xmlhttp.readyState == 4) {
var tab = xmlhttp.responseText;//tab的值是指表和表的資料總數
var table = tab.substring(0, tab.length - 8);//-8是為了防止資料量太大
var datacount = tab.substring(tab.length - 8).trim();//資料總數為了判斷分頁數
if (datacount % pagesize == 0)//求出分頁數
pagecount = datacount / pagesize;
else
pagecount = Math.floor(datacount / pagesize) + 1;
document.getElementById("d1").innerHTML = table;
document.getElementById("Hidden1").value = pagecount;// 將分頁數給Hidden1
$("table tr:odd").css("background", "#fff");
}
}
xmlhttp.send();
//首頁
document.getElementById("Button1").onclick = function () {
pageindex = 1;
xmlhttp.open("get", "Handler.ashx?pageindex=" + pageindex + "&pagesize=" + pagesize);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.status == 200 && 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();
}
//上一頁
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 == 200 && 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();
}
//下一頁
document.getElementById("Button3").onclick = function () {
pageindex += 1;
pageindex1 = document.getElementById("Hidden1").value;//從Hidden1中取出分頁數
if (pageindex >= pageindex1)//如果當前頁碼大於分頁數 則等於分頁數
pageindex = pageindex1;
xmlhttp.open("get", "Handler.ashx?pageindex="+pageindex+"&pagesize="+pagesize);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.status == 200 && 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();
}
//尾頁
document.getElementById("Button4").onclick = function () {
pageindex = document.getElementById("Hidden1").value;//當前頁等於分頁數
xmlhttp.open("get", "Handler.ashx?pagesize=" + pagesize+"&pageindex="+pageindex);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.status == 200 && 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>
</head>
<body>
<form id="form1" runat="server">
<div id="d1">
</div>
<div>
<input id="Button1" type="button" value="首 頁" /><input id="Button2" type="button" value="上一頁" /><input id="Button3" type="button" value="下一頁" /><input id="Button4" type="button" value="尾 頁" /><input id="Hidden1" type="hidden" />
</div>
</form>
</body>
</html>
這裡是一般處理常式頁面，可以複製粘貼，名字是 Handler.ashx
<%@ WebHandler Language="C#" class="Handler" %>
using System;
using System.Web;
using System.Linq;
public class Handler : IHttpHandler {
adminsDataContext dc = new adminsDataContext();//用的是Linq，也可以換成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查詢資料
select x;
result.Skip(10);//跳過10資料返回其餘資料
result.Take(10);//返回10條資料
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());//這裡加空格是為了防止資料量太大
}
public bool IsReusable {
get {
return false;
}
}
}
<script src="../Admin/js/ajaxxmlhttp.js"></script>建立一個js檔案
裡面的內容:
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用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
