HTML用ajax分页


!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="/upload/attach/blank.gif" data-echo="../Admin/js/ajaxxmlhttp.js"/script//如果直接复制,这里的路径可能不一样,需要重新定义
script src="/upload/attach/blank.gif" data-echo="../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.len >h - 8);//-8是为了防止数据量太大
var datacount = tab.substring(tab.len >h - 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.len >h - 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.len >h - 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.len >h - 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.len >h - 8);


document.getElementById("d1").innerHTML = table;

$("table tr:odd").css("background", "#fff");
}
}
xmlhttp.send();
}
}
/script
/head
body
formrunat="server"
divtype="button" value="首 页" /inputtype="button" value="上一页" /inputtype="button" value="下一页" /inputtype="button" value="尾 页" /inputtype="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‘tbodytr style=‘color:White;background-color:#6B696B;font-weight:bold;‘th scope=‘col‘zcid/thth scope=‘col‘zcname/th/tr";

var resu< = from x in dc.zhuclass//linq查询数据
select x;

resu< .Skip(10);//跳过10数据返回其余数据
resu< .Take(10);//返回10条数据

int pageindex = int.Parse(index);
int pagesize = int.Parse(size);


var a = resu< .Skip((pageindex-1) * pagesize).Take(pagesize);


foreach (var z in a)
{

table += "tr style=‘background-color:#F7F7DE;‘td" + z.zcid + "/tdtd" + z.zcname + "/td/tr";
}

table += "/tbody/table";
context.Response.Write(table +" "+resu< .Count());//这里加空格是为了防止数据量太大

}

public bool IsReusable {
get {
return false;
}
}

}

script src="/upload/attach/blank.gif" data-echo="../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分页

原文地址:http://www.cnblogs.com/HappyBoyo/p/7301188.html


最新回复(0)
/jishuV3D5ENGaYzSBfCsNh2HaazloG2iiTh8n10XAww_3D_3D4718996
8 简首页