Ajax无刷新分页
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="XML操作.AjaxPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-3.2-vsdoc2.js" type="text/javascript"></script>
<script src="jquery.pagination.js" type="text/javascript"></script>
<link href="pagination.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
var pageIndex = 0; //页面索引初始值
var pageSize = 15; //每页显示条数初始化，修改显示条数，修改这里即可
$(function () {
InitTable(0); //Load事件，初始化表格数据，页面索引为0（第一页）
//分页，PageCount是总条目数，这是必选参数，其它参数都是可选
$("#Pagination").pagination(<%=pcount%>, {
callback: PageCallback, //PageCallback() 为翻页调用次函数。
prev_text: "« 上一页",
next_text: "下一页 »",
items_per_page:pageSize,
num_edge_entries: 2, //两侧首尾分页条目数
num_display_entries: 6, //连续分页主体部分分页条目数
current_page: pageIndex, //当前页索引
});
//翻页调用
function PageCallback(index, jq) {
InitTable(index);
}
//请求数据
function InitTable(pageIndex) {
$.ajax({
type: "POST",
dataType: "text",
url: 'AjaxPage.ashx', //提交到一般处理程序请求数据
data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize, //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
success: function(data) {
$("#Result tr:gt(0)").remove(); //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
$("#Result").append(data); //将返回的数据追加到表格
}
});
}
}); </script>
</head> <body>
<form id="form1" runat="server">
<table id="Result" cellspacing="0" cellpadding="0">
<tr>
<th>商品编号</th>
<th>商品名称</th>
</tr>
</table>
<div id="Pagination" class="right flickr"></div>
<%-- 分页使用的样式（可选）
<div id="Pagination" class="meneame"></div>
<div id="Pagination" class="black"></div>
<div id="Pagination" class="quotes"></div>
<div id="Pagination" class="scott"></div> --%>
</form>
</body>
</html>
后台代码：
protected string pcount=string.Empty; //总条数
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
pcount = SQLHelper.GetDataSet("select count(*) from K_SysModuleNode").Rows[][].ToString();
}
}
Ajax处理程序：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Text;
using KingTop.Common;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Web.Script.Serialization; namespace XML操作
{
/// <summary>
/// AjaxPage1 的摘要说明
/// </summary>
public class AjaxPage1 : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
String str = string.Empty; if (context.Request["pageIndex"] != null && context.Request["pageIndex"].ToString().Length > )
{
int pageIndex; //具体的页面数
int.TryParse(context.Request["pageIndex"], out pageIndex);
if (context.Request["pageSize"] != null && context.Request["pageSize"].ToString().Length > )
{
//页面显示条数
string pageSize = context.Request["pageSize"].ToString();
string data = BindSource(pageSize,pageIndex.ToString());
context.Response.Write(data);
context.Response.End();
}
}
} public bool IsReusable
{
get
{
return false;
}
} #region 绑定
/// <summary>
/// 剧院之窗列表
/// </summary>
private string BindSource(string pageSize, string pageIndex)
{
string sql = string.Format("select NodeID,NodeCode,NodeName from K_SysModuleNode");
int pagesize = int.Parse(pageSize);
int pageindex = int.Parse(pageIndex)+; string order = " NodeCode desc ";
SqlParameter[] sqlparam = new SqlParameter[] {
new SqlParameter("@NewPageIndex",pageindex),
new SqlParameter("@PageSize",pagesize),
new SqlParameter("@order",order),
new SqlParameter("@strSql",sql)
};
StringBuilder text = new StringBuilder();
DataSet ds = SQLHelper.ExecuteDataSet(SQLHelper.ConnectionStringLocalTransaction,
CommandType.StoredProcedure, "proc_Pager", sqlparam);
if (ds != null && ds.Tables.Count > )
{
foreach (DataRow row in ds.Tables[].Rows)
{
text.Append("<tr><td>");
text.Append(row["NodeID"]);
text.Append("</td><td>");
text.Append(row["NodeCode"]);
text.Append("</td><td>");
text.Append(row["NodeName"]);
text.Append("</td></tr>");
} }
return text.ToString(); }
}
#endregion
}
所使用的方法：
/// <summary>
/// 分页存储过程
/// </summary>
/// <param name="connectionString">连接语句</param>
/// <param name="cmdType">sql语句类型</param>
/// <param name="cmdText">存储过程名称</param>
/// <param name="commandParameters">参数名</param>
/// <returns></returns>
public static DataSet ExecuteDataSet(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
{
SqlCommand cmd = new SqlCommand();
SqlConnection conn = new SqlConnection(connectionString);
DataSet ds = new DataSet();
try
{
PrepareCommand(cmd, conn, null, cmdType, cmdText, commandParameters);
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
adapter.Fill(ds);
return ds;
}
catch
{
conn.Close();
throw;
}
finally
{
conn.Close();
}
}
/// <summary>
/// Prepare a command for execution
/// </summary>
/// <param name="cmd">SqlCommand object</param>
/// <param name="conn">SqlConnection object</param>
/// <param name="trans">SqlTransaction object</param>
/// <param name="cmdType">Cmd type e.g. stored procedure or text</param>
/// <param name="cmdText">Command text, e.g. Select * from Products</param>
/// <param name="cmdParms">SqlParameters to use in the command</param>
private static void PrepareCommand(SqlCommand cmd, SqlConnection conn, SqlTransaction trans, CommandType cmdType, string cmdText, SqlParameter[] cmdParms)
{
if (conn.State != ConnectionState.Open)
{
conn.Open();
} cmd.Connection = conn;
cmd.CommandText = cmdText; if (trans != null)
{
cmd.Transaction = trans;
} cmd.CommandType = cmdType; if (cmdParms != null)
{
foreach (SqlParameter parm in cmdParms)
cmd.Parameters.Add(parm);
}
}
分页存储过程：
ALTER PROC [dbo].[proc_Pager]
@NewPageIndex int,--当前页码
@PageSize int,--分页条数
@order varchar(64),
@strSql nvarchar(max) --sql语句
as
DECLARE @str varchar(8000)
BEGIN
SET @str = 'SELECT COUNT(1) FROM ('+@strSql+')T'
SET @str = @str+' SELECT * FROM (SELECT row_number() over(order by '+@order+') as Rownum,* FROM('+@strSql+')T1)T '
END
SET @str=@str+' where Rownum between '+cast((@NewPageIndex-1)*@PageSize+1 as varchar(20))+' and '+cast(@NewPageIndex*@PageSize as varchar(20))
--IF LEN(@order)<>0
--SET @str=@str+' order by '+@order
EXEC(@str)
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框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- 学习笔记之AJAX无刷新分页
利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...
- ThinkPhp 3.2 ajax无刷新分页（未完全改完，临时凑合着用）
临时更改后的page类(很多地方没修改...因为笔者PHP没学好..)如下: <?phpnamespace Fenye\libs; /** file: page.class.php 完美分 ...
- 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 ...
随机推荐
- Ubuntu上安装MongoDB（译）
add by zhj:直接从第四步开始就可以了,而且安装好MongoDB后会自动启动的,不必自己去执行启动命令 原文:https://docs.mongodb.com/manual/tutorial/ ...
- IIS7中配置FastCGI运行PHP
环境说明: 操作系统:使用windows 2008 server 64位系统,IIS7.5PHP版本:官方下载PHP 5.4.16 VC9 x86 Non Thread SafeZIP版本.PHP路径 ...
- css兼容tooltip提示框方法
最终效果图: 基本原理 先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合适的位置.这样就 ...
- html--第一章 基础知识总结
1--<body bgcolor="red">背景颜色 2--<body backgroud＝"back-ground.gif"> 背 ...
- node.js 基础学习 express安装使用
安装好nodeJs,我们需要使用命令行中安装express. 我这里默认将Node.js安装在C:\Program Files\nodCejs\盘中. 在保持联网的状态下,依次输入如下命令. npm ...
- SAP 常用函数
1. 访问本地 或别的服务器上文件 函数 CALL METHOD CL_GUI_FRONTEND_SERVICES=>EXECUTE EXPORTING DOCUME ...
- H5-考试判断题
1.所有的元素设置了浮动后都可以设置宽高. 2.行元素都不能设置宽高跟上下边距 3.所有的css样式优先级中“!important”优先级最高(及其不推荐使用) 4.改变元素的transition值, ...
- jQuery Mobile 过渡效果
jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果. jQuery Mobile 过渡效果 jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果. 注释:如需实 ...
- python学习笔记-Day6(3)
代码书写原则: 1)不能重复写代码 2)写的代码要经常变更 编程模式概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数 ...
- [转] Eclipse 编辑相关快捷键
Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. 1. [ALT+/] 此快捷键为用户编辑的好帮手,能为用户提供内 ...