asp.net pager分页控件实现代码

这段代码是 pager分页控件的核心功能了

 代码如下 复制代码
$.fn.extend({ JPager: function (cfg, pageIndex, pageSize) {
if (cfg && pageIndex > 0 && pageSize>0) {
var token = "#" + this.attr("id");
this.empty();
var pageFirst = function () {
$(token).JPager(cfg, 1, pageSize);
};
var pagePre = function () {
$(token).JPager(cfg, pageIndex - 1, pageSize);
};
var pageLast = function () {
$(token).JPager(cfg, parseInt($("#_tot").val()), pageSize);
};
var pageNext = function () {
$(token).JPager(cfg, pageIndex + 1, pageSize);
};
var pageNumber = function () {
$(token).JPager(cfg, parseInt($(this).text()), pageSize);
};
var pageGo = function () {
var index = parseInt($("#_pos").val());
var total = parseInt($("#_tot").val());
if (index) {
if (index > total) {
$(token).JPager(cfg, total, pageSize);
}
else if (index < 1) {
$(token).JPager(cfg, 1, pageSize);
}
else {
$(token).JPager(cfg, index, pageSize);
}
}
};
var checkGoNumber = function () {
if (!Number(this.value)) {
this.value = "";
}
else {
this.value = Number(this.value);
}
};
var initCustomer = function (recordCount) {
if (cfg.customer) {
if (cfg.customer.template) {
var t = cfg.customer.template;
t = t.replace(/%total%/gi, Math.ceil(recordCount / pageSize)).replace(/%current%/gi, pageIndex).replace(/%recordCount%/gi, recordCount).replace(/%pageSize%/gi, pageSize);
if (cfg.customer.position == "right") {
$("#_right").after(t);
}
else {
$("#_left").before(t);
}
}
}
};
var changeState = function (total) {
if (pageIndex == 1) {
$("#_first").attr("class", "unable");
$("#_pre").attr("class", "unable");
}
else {
$("#_first").bind("click", pageFirst).attr("class", "number");
$("#_pre").bind("click", pagePre).attr("class", "number");
}
if (pageIndex == total) {
$("#_last").attr("class", "unable");
$("#_next").attr("class", "unable");
}
else {
$("#_last").bind("click", pageLast).attr("class", "number");
$("#_next").bind("click", pageNext).attr("class", "number");
}
};
var initNumber = function (total, count, current) {
if (total > 0 && count > 0) {
if (current < 1) {
current = 1;
}
if (current > total) {
current = total;
}
var endIndex = total;
var startIndex = 1;
var temp = current + Math.floor(count / 2);
if (temp < total) {
if (temp < count) {
endIndex = count;
}
else {
startIndex = temp - count + 1;
endIndex = temp;
}
}
else {
if (total > count) {
startIndex = total - count + 1;
}
}
$("#_number").empty();
for (var i = startIndex; i <= endIndex; i++) {
var html = $("<span></span>").text(i).bind("click", pageNumber);
if (i == current) {
$("#_number").append(html.attr("class", "selected"));
}
else {
$("#_number").append(html.attr("class", "number"));
}
}
}
};
var initPager = function (data) {
if ($.isArray(data.SearchResult) && data.RecordCount > 0) {
$(token).append("<span id='_left'><span id='_first' class='spcial'>首页</span> <span id='_pre' class='spcial'>上一页</span></span> <span id='_number'></span><span id='_go'><input id='_pos' type='text'/><input id='_to' type='button' value='GO'/></span> <span id='_right'><span id='_next' class='spcial'>下一页</span> <span id='_last' class='spcial'>末页</span></span><input id='_tot' type='hidden'/>");
var total = Math.ceil(data.RecordCount / pageSize);
$("#_tot").val(total);
$("#_pos").bind("blur", checkGoNumber);
$("#_to").bind("click", pageGo);
changeState(total);
if (cfg.showNumber && cfg.count > 0) {
initNumber(total, cfg.count, pageIndex);
}
initCustomer(data.RecordCount);
}
};
if (cfg.action) {
if (cfg.action.url && cfg.action.data) {
var d = cfg.action.data.substr(0, cfg.action.data.lastIndexOf("}")) + ',"pageIndex":' + pageIndex + ',"pageSize":' + pageSize + "}";
if (cfg.action.callback && $.isFunction(cfg.action.callback)) {
$.ajax({
type: "post",
url: cfg.action.url,
dataType: "json",
contentType: "text/json",
data: d,
success: function (data) {
initPager(data.d);
cfg.action.callback(data.d);
}
});
}
else {
$.ajax({
type: "post",
url: cfg.action.url,
dataType: "json",
contentType: "text/json",
data: d,
success: function (data) {
initPager(data.d);
}
});
}
}
}
}
}
});

下面是个简单的pager的分页css样式

 

 代码如下 复制代码
#_pos {
width: 40px;
}
.unable
{
color: #BCC0BB;
}
.number
{
margin: 2px;
color:#0000FF;
text-decoration:underline;
}
.selected
{
margin: 2px;
color: #FF0000;
font-weight: bold;
}

下而这调用pager分页的一个html文件

 

 代码如下 复制代码
<!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>
<title>分页控件示例</title>
<link href="CSS/JPager.css" rel="stylesheet" type="text/css" />
<script src="JS/jquery.min.js" type="text/javascript"></script>
<script src="JExtension/JPager.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#pager").JPager({ customer:{template:"%cuRRent%"},count: 10, action: { url: "Service/JService.svc/GetPersons", data: '{"name":"zhoulq"}'}, showNumber: true },1,5);
});
</script>
</head>
<body>
<table>
</table>
<div id="pager"></div>
</body>
</html>

scf文件,

 

 代码如下 复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
namespace JPlugin
{
[ServiceContract]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class JService
{
[OperationContract]
[WebInvoke]
public PageObject<Person> GetPersons(string name,int pageIndex,int paseSize)
{
return new PageObject<Person>(){RecordCount = 23,SearchResult = new List<Person>(){new Person(){Name="zhpulq",Age = 28},new Person(){Name = "zhouxy",Age = 24}}};
}
}
public class PageObject<T>
{
public int RecordCount { get; set; }
public List<T> SearchResult { get; set; }
}
}
时间: 2024-10-26 21:27:51

asp.net pager分页控件实现代码的相关文章

【开源】我的分页控件正式命名为QuickPager ASP.NET2.0分页控件

分页控件正式命名为 QuickPager ASP.NET2.0分页控件 . 版本号:2.0.0.1 Framework:.net2.0 分页方式:PostBack .URL (暂时没有实现URL的分页方式) webform  (b/s) 支持多种数据库,分页算法,提取数据的方式都可以替换.     分页,自从做b/s的项目起,就和分页打起了交到,一开始使用UserControl来做,很粗糙,也没有什么性能可言.但是分页又是不可避免的,一次提取全部的数据,咱用的资源太多,吃不消.于是乎就在不断的想

创建用于ASP.NET的分页控件

asp.net|创建|分页|控件 从程序员的角度来看,Microsoft SQL Server? 查询的最大缺陷之一就是返回的行数通常比应用程序的用户界面实际可以容纳的行数要多得多.这种尴尬情形经常将开发人员陷于困境.开发人员是应该创建一个非常长的页面,让用户花时间去滚动浏览,还是应该通过设置一个手动分页机制来更好地解决这个问题? 哪种解决方案更好,在很大程度上取决于要检索的数据的特性.由多个项目(如搜索结果)组成的较长列表,最好通过各页大小相等.每页相对较短的多个页面显示.由单个项目(如文章的

【开源】QuickPager ASP.NET2.0分页控件V2.0.0.3 【增加了使用说明】

================================ 欢迎转载,但是请注明出处.本文出自博客园 .谢谢合作! ================================   最新版本:V2.0.0.7 .http://www.cnblogs.com/jyk/archive/2008/07/28/1255101.html 下载:http://www.cnblogs.com/jyk/archive/2008/07/29/1255891.html   ================

asp.net中使用自定义控件的方式实现一个分页控件的代码_实用技巧

一.概述 在web开发中,常常需要显示一些数据,而为了方便排版及浏览,我们只需要显示所有记录中的一部分.一般情况下,我们采用分页来实现这个需求.实现分页的方法多种多样,在本文中,我们采用了一个分页空间来记录记录总数.当前页.总页数及页面大小等.为了有一个直观上的印象,先展示该控件运行后的效果,效果如下图所示: 二.实现方案 为了实现该效果图,在asp.net中,可以使用Custom Controls and User Controls两种方式,User Controls的实现方式及其简单,而且使

打造一个通用ASP.NET数据分页控件

asp.net|分页|控件|数据 对于几乎所有的数据表现Web应用来说,组织好数据的显示方式.避免给用户带来混乱的感觉就是最主要的目标之一.每个页面显示20条记录当然是可以接受的,但每页显示10000条记录就很容易给用户带来不便了.将数据分成多个页面显示,即对数据进行分页,是解决此类问题的最常见的办法. 一.慨述 ASP.NET本身只提供了一个支持数据分页的控件,即DataGrid分页控件,不过它比较适合Intranet环境使用,对于Internet环境来说,DataGrid分页控件提供的功能似

打造通用ASP.NET数据分页控件

asp.net|分页|控件|数据 对于几乎所有的数据表现Web应用来说,组织好数据的显示方式.避免给用户带来混乱的感觉就是最主要的目标之一.每个页面显示20条记录当然是可以接受的,但每页显示10000条记录就很容易给用户带来不便了.将数据分成多个页面显示,即对数据进行分页,是解决此类问题的最常见的办法. 一.慨述 ASP.NET本身只提供了一个支持数据分页的控件,即DataGrid分页控件,不过它比较适合Intranet环境使用,对于Internet环境来说,DataGrid分页控件提供的功能似

asp.net 数据分页控件(不用存储过程)

asp教程.net 数据分页控件(不用存储过程) 本分页控件原理 分页的方法很多,有用存储过程的,有不用存储过程的,还有在c#中用datagridview的虚拟模式的,目的只有一个,对大数据量进行处理,让用户体验得到提高,软件速度得到提升.本分页控件主要是用了下面的sql语句,我相信你能看懂的,存储过程分页也是用类似的sql代码:    1 /*tablename           :表名            如:tbtestdata  2   sqlwherestatement   :sq

jquery 分页控件实现代码_jquery

复制代码 代码如下: <!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> <title>jquery分页控

如何使用ASP.NET SqlPager分页控件

SqlPager分页控件是一个多功能灵活的分页控件,原理是利用了PagedDataSource()数据源进行分页处理,现此控件已集成于Winson.Framework框架里(以下简称WF),同时也使用了WF框架里的数据库低层操作语句,因此同时也可以支持多种数据库 一.主要功能: 1.支持AJAX分页,也可设置后台Post模式 2.支持多种分页按钮样式,同时也可以自定义按钮样式 3.支持一次性读取所有数据,或者只读取当前页面数据进行分页 4.可对GridView.Repeater.BaseData