最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流!
发话不多说了,直接上代码!
首先从网上下了一个JS分页,感觉挺好用的
(function($) {
//设定页码方法，初始化
$.fn.setPager = function(options) {
//合并PagerDefaults和options
var opts = $.extend({}, pagerDefaults, options);
return this.each(function() {
//修改,能够动态设置PageSize
pagerDefaults.PageSize = options.PageSize;
//先清空后添加(调用自定义的setPagerHtml方法)
$(this).empty().append(setPagerHtml(parseInt(options.RecordCount), parseInt(options.PageIndex), options.buttonClick));
$('.pager a').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
});
};
//设定页数及html
//参数1:总条目数
//参数2:当前页
//参数3:页码按钮
function setPagerHtml(RecordCount, PageIndex, pagerClick) {
//调用pager样式表
var $content = $("<div class=\"pager\"></div>");
//起始页
var startPageIndex = 1;
//若没有条目数,则按 pagerDefaults.PageSize = options.PageSize;选择的条目数来算
if (RecordCount <= 0) RecordCount = pagerDefaults.PageSize;
//页尺寸
var PageSize = pagerDefaults.PageSize;
//alert(pagerDefaults.PageSize);
//末页
var endPageIndex = parseInt(RecordCount % parseInt(PageSize)) > 0 ? parseInt(RecordCount / parseInt(PageSize)) + 1 : RecordCount / parseInt(PageSize);
//当前页若大于末页,则等于末页
if (PageIndex > endPageIndex) PageIndex = endPageIndex;
//当前页小于0,则等于起始页
if (PageIndex <= 0) PageIndex = startPageIndex;
//下一页
var nextPageIndex = PageIndex + 1;
//上一页
var prevPageIndex = PageIndex - 1;
//当前页等于首页
if (PageIndex == startPageIndex) {
//生成不能点击的首页和上一页
$content.append($("<span>首页</span>"));
$content.append($("<span>上一页</span>"));
} else {
//生成一个首页和上一页按钮
$content.append(renderButton(RecordCount, 1, pagerClick, "首页"));
$content.append(renderButton(RecordCount, prevPageIndex, pagerClick, "上一页"));
}
//这里判断是否显示页码
if (pagerDefaults.ShowPageNumber) {
// var html = "";
//页码部分隐藏 只显示中间区域
if (endPageIndex <= 5 && PageIndex <= 5) {
for (var i = 1; i <= endPageIndex; i++) {
if (i == PageIndex) {
//生成不可点击的页码,也可用于设置样式,加粗
$content.append($("<span>" + i + "</span>"));
} else {
//生成可点击的页码
$content.append(renderButton(RecordCount, i, pagerClick, i));
}
}
}
//生成< 首页 上一页 ...3 4 5 6 7 下一页 末页 >格式
else if (endPageIndex > 5 && endPageIndex - PageIndex <= 2) {
$content.append($("<a>...</a>"));
for (var i = endPageIndex - 4; i <= endPageIndex; i++) {
if (i == PageIndex) {
$content.append($("<span>" + i + "</span>"));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}
}
}
//生成< 首页 上一页 ... 2 3 4 5 6 ... 下一页 末页 >格式
else if (endPageIndex > 5 && PageIndex > 3) {
$content.append($("<a>...</a>"));
for (var i = PageIndex - 2; i <= PageIndex + 2; i++) {
if (i == PageIndex) {
$content.append($("<span>" + i + "</span>"));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}
}
$content.append($("<a>...</a>"));
}
//生成< 首页 上一页 1 2 3 4 5 ... 下一页 末页 >格式
else if (endPageIndex > 5 && PageIndex <= 3) {
for (var i = 1; i <= 5; i++) {
if (i == PageIndex) {
$content.append($("<span>" + i + "</span>"));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}
}
$content.append($("<a>...</a>"));
}
}
//当前页等于末页
if (PageIndex == endPageIndex) {
//生成不能点击的下一页和末页
$content.append($("<span>下一页</span>"));
$content.append($("<span>末页</span>"));
} else {
//生成一个下一页和末页按钮
$content.append(renderButton(RecordCount, nextPageIndex, pagerClick, "下一页"));
$content.append(renderButton(RecordCount, endPageIndex, pagerClick, "末页"));
}
//返回生成的分页
return $content;
}
//生成页码
//参数1:总条目数
//参数2:指定页
//参数3:页码按钮
//参数4:指定页文本
function renderButton(recordCount, goPageIndex, EventHander, text) {
var $goto = $("<a title=\"第" + goPageIndex + "页\">" + text + "</a>\"");
$goto.click(function() {
EventHander(recordCount, goPageIndex, pagerDefaults.PageSize);
});
return $goto;
}
//pagerDefaults变量
var pagerDefaults = {
//
DefaultPageCount: 1,
//当前页
DefaultPageIndex: 1,
//总条目数
PageSize: 20,
//是否显示页码
ShowPageNumber: true
};
})(jQuery);
JS
Theatrelist1.aspx前台页面代码,注意AJAX请求不能想自身后台(Theatrelist1.aspx.cs)发送请求,这样是获取不到的!所以只能发送给一般处理程序(ajaxPage.ashx)
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/JqueryPage.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//初始化
GetData(1, 1);
});
function InitPager(RecordCount, PageIndex, PageSize, Data) {
$("#Pager").setPager({ RecordCount: RecordCount, PageIndex: PageIndex, PageSize: PageSize, buttonClick: PageClick });
}
//页码按钮
//参数1:总条目数
//参数2:当前页
//参数3:页尺寸
PageClick = function(RecordCount, PageIndex, PageSize) {
GetData(PageSize, PageIndex);
};
//ajax请求响应
//参数1:页尺寸
//参数2:当前页
function GetData(PageSize, PageIndex) {
$.ajax({
url: 'ajaxPage.ashx',
Type: "post",
contentType: "application/json",
data: 'PageSize=' + PageSize + '&PageIndex=' + PageIndex,
success: function(data, status) {
$("#list").empty();
var i = 0;
for (i = 0; i < data.length-1; i++) {
var li = $("<li><a href=Theatrecontent.aspx?id=" + data[i].ID + ">" + data[i].Title + "</a><span>" + data[i].Time + "</span></li>");
$("#list").append(li);
}
$("#Pager").setPager({ RecordCount: data[i].Count, PageIndex: PageIndex, PageSize: PageSize, buttonClick: PageClick });
}
});
}
</script>
<!--截取主要的部分而已-->
<div class="o_l_list">
<p class="o_p_h">
剧院之窗..............................................................................</p>
<ul id="list">
</ul>
<p id="Pager" align="center">
</p>
</div>
HTML
简单的CSS样式
.pager span
{
position:relative;
margin-right:5px;
color:Gray;
text-align:center;
line-height:50px;
} .pager a
{
position:relative;
margin-right:5px;
text-align:center;
line-height:50px;
}
CSS
ajaxPage.ashx页面代码
<%@ WebHandler Language="C#" Class="ajaxPage" %> using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Script.Serialization;
using System.Collections.Generic; public class ajaxPage : IHttpHandler { public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/json";
BindData_Newslist(context);
} public bool IsReusable {
get {
return false;
}
} #region 绑定
/// <summary>
/// 剧院之窗列表
/// </summary>
private void BindData_Newslist(HttpContext context)
{
//页尺寸
int pageSize = Convert.ToInt32(context.Request["PageSize"]);
//当前页
int pageIndex = Convert.ToInt32(context.Request["PageIndex"]); //总条目数
string Count = ""; //链接数据库
string conString = ConfigurationSettings.AppSettings["DBConnStr"];
SqlConnection con = new SqlConnection(conString); //打开数据库
con.Open(); //page是存储过程
SqlCommand cmd = new SqlCommand("page", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("@pageSize", pageSize);
cmd.Parameters.Add("@pageIndex", pageIndex);
//SqlParameter sqlcount = new SqlParameter("@count", SqlDbType.Int);
//sqlcount.Direction = ParameterDirection.Output;
//cmd.Parameters.Add(sqlcount);
cmd.Parameters.Add("@count", );
//声明为输出参数
cmd.Parameters["@count"].Direction = ParameterDirection.Output; SqlDataAdapter adpt = new SqlDataAdapter(cmd as SqlCommand);
DataSet ds = new DataSet();
adpt.Fill(ds);
List<Table> list = new List<Table>();
DataTable dt = ds.Tables[];
Count = cmd.Parameters["@count"].Value.ToString();
//Count = sqlcount.Value.ToString();
int i = ;
for (i = ; i < dt.Rows.Count; i++)
{
list.Add(new Table()
{
ID = dt.Rows[i]["id"].ToString(),
Title = dt.Rows[i]["title"].ToString(),
Time = dt.Rows[i]["Time"].ToString()
});
}
list.Add(new Table() { Count = Count }); //序列化输出
JavaScriptSerializer jss = new JavaScriptSerializer();
context.Response.Write(jss.Serialize(list));
context.Response.End();
} public class Table
{
public string ID { get; set; }
public string Title { get; set; }
public string Time { get; set; }
public string Count { get; set; }
} #endregion }
C#
实现简单分页的存储过程
USE [Jopera]
GO
/****** Object: StoredProcedure [dbo].[page] Script Date: 08/31/2013 10:09:21 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
ALTER proc [dbo].[page]
--页尺寸
@pageSize int, --当前页
@pageIndex int, --总条目数
@count int output
AS
set @count=(select count(*) from Theatre where State=1)
select id,title,[Time]
from (select id,title,[Time],
ROW_NUMBER() over(order by Time DESC) as num
from Theatre
where State=1) T
where (T.num>@pageSize*(@pageIndex-1)) and (T.num<=@pageSize*@pageIndex)
SQL
最终效果页面