AJAX+JQUERRY实现分页
============== Windows Phone 7手机开发、.Net培训、期待与您交流! =============
JQERRY代码如下:
var where = ""; var ajaxurl = "";$().ready(function () {var indexs = 1;if ($("#hdwhere").val() == null) {}else {where = $("#hdwhere").val();}ajaxurl = "ashx/Pages.ashx";Init(indexs);$(".UpPage").click(function () {if (indexs > 1) {indexs--}Init(indexs);});$(".DownPage").click(function () {if (indexs < $("#lbPages").text()) {//判断小于总页数indexs++;}Init(indexs);});$(".FirstPage").click(function () {Init(1);});$(".LastPage").click(function () {Init($("#lbPages").text());}); }); function Init(ind) {$.ajax({type: "GET",dataType: "json",url: ajaxurl, //目标地址(页面代码会在下面呈上)data: { "pageIndex": ind, "where": where }, //要发送的数据 beforeSend: function () {// alert("准备发送"); },success: function (json) {var result = json.ShowData;var tbody = "";// $(".block_topic_content").html("");var $str;$(".block_topic_content").remove();$.each(result, function (i, n) {alert(i);$str = $("<tr class='block_topic_content'><td class='persontablerow'>" + n.EmployeeID + "</td><td class='persontablerow'>" + n.FName + "</td><td class='persontablerow'>" + n.FDepartName + "</td><td class='persontablerow'>" + n.FPosition + "</td><td class='persontablerow'>" + n.FPhoneNum + "</td><td class='persontablerow'><a href='#'>查看</a> | <a href='#'>修改</a> | <a href='#'>删除</a></td></tr>");$(".block_topic_title").after($str);});$("#lbNowPage").text(ind);},complete: function (data, textStatus) {//HideLoading(); },error: function (data, textStatus) {//请求出错处理 }}); }
HTML页面:
<table width="96%" border="0" cellspacing="0" cellpadding="0"><tr class="block_topic_title"><td width="15%" class="persontable">员工编号</td><td width="15%" class="persontable">姓名</td><td width="15%" class="persontable">部门</td><td width="15%" class="persontable">职务</td><td width="20%" class="persontable">联系方式</td><td width="20%" class="persontable">操作</td></tr><tr><td class="persontablebottom" colspan="6><div style="float:left;margin-left:20px;"><a href="javascript:void(0);" class="FirstPage">首页</a></div><div style="float:left;margin-left:20px;"><a href="javascript:void(0);" class="UpPage">上一页</a></div><div style="float:left;margin-left:20px;"><a href="javascript:void(0);" class="DownPage">下一页</a></div><div style="float:left;margin-left:20px;"><a href="javascript:void(0);" class="LastPage">尾页</a></div></td></tr> </table>
ashx页面代码:
private string constr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["OADBConnectionString"].ConnectionString;//数据库连接字符串string where = "";public void ProcessRequest(HttpContext context){//去掉页面缓存context.Response.Buffer = true;context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);context.Response.AddHeader("pragma", "no-cache");context.Response.AddHeader("cache-control", "");context.Response.CacheControl = "no-cache";context.Response.ContentType = "text/plain";context.Response.Charset = "UTF-8";where = context.Request.Params["where"].ToString();int pageindex = string.IsNullOrEmpty(context.Request.Params["pageIndex"].ToString()) ? 1 : Convert.ToInt32(context.Request.Params["pageIndex"].ToString());DataSet ds = GetList(pageindex, where);string jsonData = DataTableToJSON(ds.Tables[0], "ShowData");//输入json格式数据 context.Response.Write(jsonData);}public bool IsReusable{get{return false;}}/// <summary>/// 分页获取数据列表/// </summary>private DataSet GetList(int pageindex, string where){//创建数据库连接池SqlConnection co = new SqlConnection(constr);//打开连接池 co.Open();SqlCommand commands;commands = new SqlCommand("select count(*) from T_Persons", co);//数据总记录数int totalcounts = Convert.ToInt32(commands.ExecuteScalar());//自定义每页大小为5条数据int pagesize = Convert.ToInt32(ConfigurationManager.AppSettings["pagesize"].ToString()); ;//总记录数int totalpages;if (totalcounts % pagesize > 0)totalpages = totalcounts / pagesize + 1;elsetotalpages = totalcounts / pagesize;if (pageindex > totalpages)pageindex = totalpages;DataSet ds = new DataSet();commands = new SqlCommand("P_Page " + pageindex + ", " + pagesize + ", 'FDepartName=" + where + "','T_Persons', true,'EmployeeID'", co);SqlDataAdapter adapter = new SqlDataAdapter(commands);adapter.Fill(ds, "ds");co.Dispose();return ds;}/// <summary>/// 数据表转换成JSON字符/// </summary>/// <param name="dt">数据表对象</param>/// <param name="dtName">数据表名称</param>public static string DataTableToJSON(DataTable dt, string dtName){StringBuilder sb = new StringBuilder();StringWriter sw = new StringWriter(sb);using (JsonWriter jw = new JsonTextWriter(sw)){JsonSerializer ser = new JsonSerializer();jw.WriteStartObject();jw.WritePropertyName(dtName);jw.WriteStartArray();if (dt != null){foreach (DataRow dr in dt.Rows){jw.WriteStartObject();foreach (DataColumn dc in dt.Columns){jw.WritePropertyName(dc.ColumnName);ser.Serialize(jw, dr[dc].ToString());}jw.WriteEndObject();}}jw.WriteEndArray();jw.WriteEndObject();sw.Close();jw.Close();}return sb.ToString();}
注意JSON数据处理引用的是:Newtonsoft.Json.dll。
分页存储过程:
ALTER PROCEDURE [dbo].[P_Page] ( @startIndex INT, --当前页码@pageSize INT, --每页多少条数据@strSql varchar(5000), ---查询条件不用加where,例:id>10@TableName varchar(50), --表名@DoCount AS bit=1, -- 0值返回记录总数, 非 0 值则返回记录 @keyword varchar(50) --排序字段 ) AS begin tran IF @DoCount=0 Goto GetCount Else Goto GetSearch GetCount: --返回记录总数 DECLARE @SearchSql AS Nvarchar(4000) SET @SearchSql= 'SELECT Count(*) AS Total FROM '+@TableName+' WHERE ' +@strsqlexec sp_executesql @SearchSql --print @SearchSql COMMIT TRAN return GetSearch: --返回记录 DECLARE @SqlQuery varchar(4000) SET @SqlQuery='SELECT * FROM (SELECT ROW_NUMBER() OVER (ORDER BY O.'+@keyword+' ) Row, * from '+@TableName+' O Where '+@strsql+') as temp WHERE Row BETWEEN '+cast((@startIndex-1)*@pageSize+1 as varchar) +' and '+cast(@startIndex*@pageSize as varchar)+' and '+ @strsql +' order by '+@keyword + ' desc'--print @SqlQuery execute(@SqlQuery) COMMIT TRAN
=============== Windows Phone 7手机开发、.Net培训、期待与您交流! ==================
转载于:https://www.cnblogs.com/sixstar01/archive/2012/11/26/2790042.html
AJAX+JQUERRY实现分页相关推荐
- .net MvcPager+Ajax无刷新分页
.net MvcPager+Ajax无刷新分页百度网盘链接: https://pan.baidu.com/s/1QmtBVH_sb4O6pNnEIsB5jw 1.新建Asp.net Web项目,重 ...
- php页面自分页刷新,详解PHP+AJAX无刷新分页实现方法
PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; fu ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- ajax + laypage实现分页
ajax + laypage实现分页 使用laypage实现分页,官网给出的实例如下,由于官网没有从后台获取数据,只是在前端构造了一些数据,在我们实际应用中可能会踩坑,在此做个记录. <!DOC ...
- 产品ajax无刷新kesion,科讯商业版中用到的ajax空间与分页函数
科讯商业版中用到的ajax空间与分页函数 更新时间:2007年09月02日 22:02:32 作者: 科讯sql商业版中用到的ajax空间与分页函数,他们的js代码学习是非常不错的 //ajax ...
- IntelliJ IDEA中ajax开发实现分页查询
此文章的图片被简书禁止访问了, 可以上简书查看此文章. 链接如下 https://www.jianshu.com/p/1fd6b39e98ac IntelliJ IDEA中ajax开发实现分页查询 文 ...
- java ajax无刷分页_简单实现Ajax无刷新分页效果
Ajax无刷新分页效果,如下代码实现 Ajax无刷新分页效果 function showpage(url) { var xhr = new XMLHttpRequest(); xhr.onreadys ...
- 基于Jquery+Ajax+Json+高效分页
摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...
- c# Ajax后台动态分页
创建WebPager类 public static class WebPager{public static string WebPagerAjax(string Idn, bool IsShort) ...
最新文章
- [20170914]tnsnames.ora的管理.txt
- 前端工程化工具Fekit分析
- 设计强大的云应用程序
- 什么是按位移位(位移)运算符以及它们如何工作?
- 尚硅谷Docker---1、docker杂记
- HDU 4831 Scenic Popularity 暴力模拟
- LNMP详解(十六)——Nginx日志切割
- malloc和new的区别和联系
- maven项目配置私服
- 使用win7 快捷键
- Cause: java.lang.ArrayIndexOutOfBoundsException: 8
- html编写扑克牌游戏,用js编写扑克牌小游戏
- 信息安全技术 应用软件安全编程指南
- 基于PHP+MySQL实现注册和登录功能
- 全网最硬核 JVM TLAB 分析(额外加菜) 8. 通过 JFR 监控 TLAB
- iOS解析新浪微博的@##以及URL链接并展示
- error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.28/version: open //./pipe/docker_
- “云+医疗”时代来临,医疗桌面云市场步入快车道
- JPA介绍及persistence.xml配置介绍
- SOLIDWORKS 2016官方正版功能介绍
热门文章
- 网络营销——网络营销浅析网站不发文还能维持稳定排名吗?
- mysql导入sql文件限制,Mysql导入大容量SQL文件数据有关问题
- robotframework ie浏览器中click button不可用_RobotFramework自动化Selenium2Library库常用关键字...
- matlab模块 python,Matlab 和Python结合使用
- 名词解释说明用英语怎么说_“用英语怎么说”译成How to say in English,典型的中式英语!...
- Vim设置括号自动补全和快速跳出
- mongodb分片介绍—— 基于范围(数值型)的分片 或者 基于哈希的分片
- [Java] 基本資料包裝類別 Wrapper Classes
- 20165328 预备作业3 Linux安装及命令
- 排序之二分查找插入排序算法