学习笔记之AJAX无刷新分页
利用AJAX实现无刷新分页技术原理：
其主要是利用AJAX的异步处理机制，实现数据的异步传递，它隐藏了客户端向服务端请求数据的状态，在客户端表现为无刷新的显示状态。
实现分页的步骤：
1.客服端点击页码按钮触发分页事件
2.客户端传递页码参数到服务端
3.服务端连接数据库获取数据
4.服务端将数据序列化并写入输出流
5.客户端获取输出流，并转换为JSOＮ格式数据
６.将JSON数据组合排列到标签元素生成具体页面。
具体实例：
ASPX页面代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
var pageCount = 0;
var pageIndex = 1;
$(function () {
//getdata
$.post("Pager.ashx", { "data": "getdata", "count": "1" }, function (data, status) {
var dd = $.parseJSON(data);
$(".con li").remove();
for (var i = 0; i < dd.length; i++) {
var li = $("<li>" + dd[i].datetime + ":" + dd[i].Msg + "</li>");
$(".con").append(li);
}
});
//getdatacount
$.post("Pager.ashx", { "data": "getcount" }, function (data, status) {
//alert(data);
pageCount = data;
$(".b").text(data);
});
//尾页
$(".pp li:eq(0) a").click(function (e) {
e.preventDefault();
$.post("Pager.ashx", { "data": "getdata", "pagecount": pageCount }, function (data, status) {
var dd = $.parseJSON(data);
$(".con li").remove();
for (var i = 0; i < dd.length; i++) {
var li = $("<li>" + dd[i].datetime + ":" + dd[i].Msg + "</li>");
$(".con").append(li);
}
});
});
//下页
$(".pp li:eq(1) a").click(function (e) {
e.preventDefault();
if (pageIndex < pageCount) {
pageIndex++;
$.post("Pager.ashx", { "data": "getdata", "pagecount": pageIndex }, function (data, status) {
var dd = $.parseJSON(data);
$(".con li").remove();
for (var i = 0; i < dd.length; i++) {
var li = $("<li>" + dd[i].datetime + ":" + dd[i].Msg + "</li>");
$(".con").append(li);
}
});
}
});
//上一页
$(".pp li:eq(2) a").click(function (e) {
e.preventDefault();
if (pageIndex > 1) {
pageIndex--;
$.post("Pager.ashx", { "data": "getdata", "pagecount": pageIndex }, function (data, status) {
var dd = $.parseJSON(data);
$(".con li").remove();
for (var i = 0; i < dd.length; i++) {
var li = $("<li>" + dd[i].datetime + ":" + dd[i].Msg + "</li>");
$(".con").append(li);
}
});
}
});
//首页
$(".pp li:eq(3) a").click(function (e) {
e.preventDefault();
pageIndex = 1;
$.post("Pager.ashx", { "data": "getdata", "pagecount": pageIndex }, function (data, status) {
var dd = $.parseJSON(data);
$(".con li").remove();
for (var i = 0; i < dd.length; i++) {
var li = $("<li>" + dd[i].datetime + ":" + dd[i].Msg + "</li>");
$(".con").append(li);
}
});
});
})
</script>
<style type="text/css">
li{ float:right; margin:0 2px 0; list-style:none;}
.page{float:right; margin-right:1em;}
.content{ clear:both;}
.con li{ float:none; list-style:none; background-color:Gray;}
a{ cursor:pointer;}
.con
{
width: 400px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="content" style=" width:600px; height:400px; border:1px solid red;">
<ul class="con"></ul>
</div>
<div>
<ul class="pp">
<li><a>尾页</a></li>
<li><a>下一页</a></li>
<li><a>上一页</a></li>
<li><a>首页</a></li>
<li><div class="page">共有数据：<span class="b"></span></div></li>
</ul>
</div>
</form>
</body>
</html>
后台处理程序ashx
<%@ WebHandler Language="C#" class="Pager" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Web.Script.Serialization;
using System.Data;
using System.Data.SqlClient;
using System.Text;
public class Pager : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string paras = context.Request.Params["data"].ToString();
//string pagecount = ;
if (paras == "getcount")
{
fenyeSlect ff = new fenyeSlect();
DataTable dt = ff.selectCount().Tables[0];
int count = Convert.ToInt32(dt.Rows[0][0].ToString());
int pageCount = count / 10;
if (count % 10 != 0)
{
pageCount++;
}
context.Response.Write(pageCount);
}
else if (paras == "getdata")
{
string pagenum = context.Request.Params["count"].ToString();
int ipagenum = Convert.ToInt32(pagenum);
fenyeSlect ff = new fenyeSlect();
DataSet ds = ff.GetPageData((ipagenum - 1) * 10 + 1, (ipagenum) * 10);
DataTable dt = ds.Tables[0];
List<News> list = new List<News>();
// string[] list00=new string[dt.Rows.Count];
for (int row = 0; row < dt.Rows.Count; row++)
{
// list00[row] = dt.Rows[row][1].ToString();
list.Add(new News { datetime = dt.Rows[row][1].ToString(), Msg = dt.Rows[row][2].ToString(), ID = dt.Rows[row][0].ToString() });
}
JavaScriptSerializer jss = new JavaScriptSerializer();
string data = jss.Serialize(list);
context.Response.Write(data);
}
//context.Response.Write("Hello World");
}
public bool IsReusable {
get {
return false;
}
}
public class fenyeSlect
{
public SqlConnection getconn()
{
string con = "server=.;uid=sa;pwd=nexel;database=wsxfy;";
SqlConnection conn = new SqlConnection(con);
return conn;
}
/// <summary>
/// 获得条数，有多少条数据
/// </summary>
/// <returns></returns>
public DataSet selectCount()
{
string selectCount = "SELECT COUNT(*) FROM T_Comment";
DataSet ds = new DataSet();
SqlConnection conn = getconn();
conn.Open();
SqlDataAdapter da = new SqlDataAdapter(selectCount, conn);
da.Fill(ds);
return ds;
}
public DataSet GetPageData(int StartRowIndex, int EndRowIndex)
{
// string fenye = "select * from (select ID,Title,Person,[Time],Row_Number() over(order by ID desc) rownum from tb_IndustryNews)t where t.rownum>="+StartRowIndex+" and t.rownum<="+EndRowIndex+"";
StringBuilder sql = new StringBuilder();
sql.Append("select * from ( ");
sql.Append("select ID,PostDate,Msg,Row_Number() over(order by ID desc) Rownum from T_Comment ");
sql.Append(")t ");
sql.Append("where t.Rownum>='" + StartRowIndex + "' and t.Rownum<='" + EndRowIndex + "'");
DataSet ds = new DataSet();
SqlConnection conn = getconn();
conn.Close();
SqlDataAdapter da = new SqlDataAdapter(sql.ToString(), conn);
da.Fill(ds);
return ds;
}
}
public class News
{
public string datetime { get; set; }
public string Msg { get; set; }
public string ID { get; set; }
}
}
学习笔记之AJAX无刷新分页的更多相关文章
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- 关于Ajax无刷新分页技术的一些研究 c#
关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...
- thinkphp下实现ajax无刷新分页
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- ThinkPhp 3.2 ajax无刷新分页（未完全改完，临时凑合着用）
临时更改后的page类(很多地方没修改...因为笔者PHP没学好..)如下: <?phpnamespace Fenye\libs; /** file: page.class.php 完美分 ...
- Ajax无刷新分页
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage ...
- jquery+jquery.pagination+php+ajax 无刷新分页
<!DOCTYPE html> <html ><head><meta http-equiv="Content-Type" content= ...
- SUI分页组件和avalon搞定ajax无刷新分页
<div ms-controller="main"> <h2 class="pagination-centered">{{ title ...
- php+ajax无刷新分页原生ajax实现分页最简单完整实例-完整代码，
展示页面:index.html <html><script> function ajax_show() { // 获取当前页 var page =1; var xhr = ne ...
随机推荐
- 玩玩SPARK
没有SCALA的东东,玩不起哈. ./spark-shell 从文件生成一个DRIVER? val logFile = sc.textFile("hdfs://192.168.14.51:9 ...
- CONTEXT MENU简介
安卓中的上下文菜单是通过长按控件元素触发的,要注意的是每次都会触发onCreateContextMenu方法: main.xml <?xml version="1.0" en ...
- 如何让Qt 的程序等待一段时间（等待的同时，还让主界面刷新图片）good
后面这种方法可以不影响其他线程的响应,又可以达到等待的目的. 测试的一个小例子: class Widget : public QWidget { Q_OBJECT public: Widget(QWi ...
- 【转】ListView与RadioButton组合——自定义单选列表
原文网址:http://blog.csdn.net/checkin001/article/details/11519131 Android自带的RadioButton单选框只支持添加文字,我们自己写A ...
- B - The Accomodation of Students - hdu 2444（最大匹配）
题意:现在有一些学生给你一下朋友关系(不遵守朋友的朋友也是朋友),先确认能不能把这些人分成两组(组内的人要相互不认识),不能分的话输出No(小写的‘o’ - -,写成了大写的WA一次),能分的话,在求 ...
- 使用javascript判断浏览器类型
之前在项目中遇到过要针对不同浏览器做不同的一些js或者css操作,后来某个朋友也突然问到这个问题,所以,整理了一下,在这里留个笔记,方便以后使用. 使用javascript判断浏览器类型: funct ...
- 总结了关于PHP xss 和 SQL 注入的问题(转)
漏洞无非这么几类,XSS.sql注入.命令执行.上传漏洞.本地包含.远程包含.权限绕过.信息泄露.cookie伪造.CSRF(跨站请求)等.这些漏洞不仅仅是针对PHP语言的,本文只是简单介绍PHP如何 ...
- JPDA 利用Eclipse和Tomcat进行远程调试 --转
1 编辑tomcat\bin\catalina.bat ,添加 rem =============================================================== ...
- 数据结构笔记01：编程面试过程中常见的10大算法（java）
以下是在编程面试中排名前10的算法相关的概念,我会通过一些简单的例子来阐述这些概念.由于完全掌握这些概念需要更多的努力,因此这份列表只是作为一个介绍.本文将从Java的角度看问题,包含下面的这些概念: ...
- JavaScript arguments类数组
1. 什么是类数组 arguments 是一个类数组对象.代表传给一个function的参数列表. 我们来传一个实例. function printArgs() { console.log(argu ...