HTML用ajax分页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML用ajax分页相关的知识，希望对你有一定的参考价值。
首先有几点说明：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分页的主要内容，如果未能解决你的问题，请参考以下文章