aspx代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无刷新分页</title>
<link href="css/pagination.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.pagination.js"></script>
<script type="text/javascript">
var pageIndex = 0; //页面索引初始值
var pageSize = 3; //每页显示条数初始值
$(function () {
InitTable(0); //初始化表格数据
//分页,pageCount是总条目数,必选参数,其余可选参数
$("#Pagination").pagination(<%=pcount%>,{
callback : PageCallBack, //PageCallback() 为翻页调用次函数
prev_text : "<<上一页",
next_text : "下一页>>",
items_per_page : pageSize, //每页显示的条目数
num_edge_entries : 2, //连接“下一页”显示的分页数
num_display_entries : 3, //连续“上一页”显示的分页数
current_page: pageIndex, //当前页索引
});
});
//Load事件,初始化表格数据,请求数据
function InitTable(pageIndex)
{
var data = {
'PageSize': pageSize,
'PageIndex':pageIndex
};
//alert(data.PageSize);
$.ajax({
type: "POST",
datatype: "xml", //后台返回dataset,这里要用xml
url: "/_WebService/_AaronTest.asmx/GetBindSource",
data: data,
success: function (result) {
$("#Result tr:gt(0)").remove(); //移除Id为Result的表格里的行,从第二行开始
//演示一下捕获
try{
$(result).find("Table").each(function(){
//alert($(this).find("PCNum").text()); //用这个格式获取数据
$("#Result").append("<tr><td>" + $(this).find("PCNum").text() + "</td><td>"+$(this).find("NetIP").text() + "</tr>");
});
}
catch(ex){
alert(ex);
return;
}
},
error: function(result, status){ //如果上面的捕获出错会执行这里的回调函数
if(status == 'error'){
alert(status);
}
}
});
}
//翻页调用函数
function PageCallBack(index, jq) {
InitTable(index);
}
</script>
</head>
<body>
<form id="form1" runat="server">
jquery无刷新分页测试:<br />
<table id="Result">
<tr>
<th>PCNum</th>
<th>NetIP</th>
</tr>
</table>
<div id="Pagination" class="flickr"></div> <%--<div id="Pagination" class="flickr"></div>
<div id="Pagination" class="meneame"></div>
<div id="Pagination" class="scott"></div>
<div id="Pagination" class="quotes"></div>
<div id="Pagination" class="black"></div> --%>
</form>
</body>
</html>

  

aspx.cs代码:

 protected int pcount = 0;   //总条数

        protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
_PCManager pcm = new _PCManager();
pcount = pcm.GetTotalCount(); //获取总条数
}
}

  

asmx代码:

[WebMethod(Description = "获取分页数据,返回DataSet")]
public DataSet GetBindSource(int PageSize, int PageIndex)
{
_PCManager pcm = new _PCManager();
return pcm.GetListByPage(PageSize, PageIndex);
}

  

SQL存储过程:

ALTER proc [dbo].[GetPCInfoByPage]
@pageSize int,
@pageIndex int
as declare @pageCountStart int
set @pageCountStart = @pageSize * @pageIndex declare @pageCountEnd int
set @pageCountEnd = @pageSize * (@pageIndex + 1) select * from (
select ROW_NUMBER() over (order by ID asc) row,*
from PCInfo
)t
where t.row>@pageCountStart and t.row<=@pageCountEnd

  

效果截图:

源代码链接:http://pan.baidu.com/s/1sl8OySH

asp.net练习②——Paginaton无刷新分页的更多相关文章

  1. asp.net MVC4 +MVCpager 无刷新分页

    本人菜鸟,最近在用MVC4和MVCpager做无刷新分页时,发现点击下一页时数据不是Ajax提交的,弄了好久终于找到原因,原来还是Jquery引用的问题,现在把代码粘出来,希望能帮到刚接触的程序员,第 ...

  2. ASP.NET中无刷新分页

    上次介绍了我们代码写的刷新分页,这次就来说说无刷新分页. 这次我们是在上次的基础上改动了一些,我们都知道想要无刷新,就需要Ajax,在我们的ASP.NET中AJax是和一般处理程序配合着用的. 无刷新 ...

  3. ASP.NET Ajax简单的无刷新分页

    最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...

  4. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

  5. Repeater 无刷新分页

    原文:http://blog.csdn.net/Sandy945/archive/2009/05/22/4208998.aspx 本文讲述的是如何利用 XMLHttpRequest 来对 Repeat ...

  6. MVC无刷新分页

    MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)   我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下 ...

  7. 关于Ajax无刷新分页技术的一些研究 c#

    关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...

  8. 在Thinkphp中使用AJAX实现无刷新分页

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...

  9. phpcms无刷新分页

    控制器添加一个函数: 添加一个静态页面ajax_message.html,在页面中添加如下代码: 在要分页的页面(我的是"show"页面)中添加如上图代码: phpcms无刷新分页 ...

随机推荐

  1. elasticsearch+logstash+kibana部署

    这篇博客讲的是elasticsearch+logstash+kibana部署的方法. 内容大纲: 1.elasticsearch+logstash+kibana部署 2.收集Tomcat日志 3.收集 ...

  2. ARTS打卡计划第十四周

    Algorithms: https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock/ Review: “How to write ...

  3. react-hook的简单的动画插件react-simple-animate(其实是react插件,但是这里只介绍react-hook的简单用法)

    1.useAnimate(普通anima动画的形式) (1)js const animate = useAnimate({ complete: { display: 'none' }, //动画完成的 ...

  4. koa 项目实战(十)使用 validator 验证表单

    1.安装模块 npm install validator -D 2.验证注册参数 根目录/validation/register.js const Validator = require('valid ...

  5. JVM | 分代垃圾回收策略的基本概念以及过程

    一.为什么要分代 分代的垃圾回收策略,是基于这样一个事实:不同的对象的生命周期是不一样的.因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程序运行的过程中,会产生大量的对 ...

  6. 本地服务CURL请求本地另一个服务API返回超时/或无返回

    入职之后一直在忙,终于有时间整理一波最近踩到的坑. 起因: 项目是微服务架构,一个项目对外提供API,新的项目调用API获得数据.于是就在本地搭建了两个服务.配置了两个虚拟域名,指向两个项目,当然我本 ...

  7. 理解MyCat分库分表

    1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.

  8. 实验吧中围在栅栏中的爱-------writeup

    涉及知识点:栅栏密码解密.摩斯密码解密.替代密码解密 题目 可以看到下面一行东西,明显是一串摩斯密码,利用CTFCrakTools将密文解密 得到另一串密码kiqlwtfcqgnsoo 那么我们尝试着 ...

  9. HTML之表单类控件、图像类元素的CSS特别样式汇总

    前言 记录下开发过程中一些特殊表单控件(input.textarea.select等)的样式控制 input 取消光标聚焦时,输入框的外延边框 input:focus{ outline:none } ...

  10. V8的垃圾回收和内存限制

    V8的垃圾回收和内存限制 前言 在第三次浏览器大战中,来自Google的Chrome浏览器凭借优异的性能成为聚光灯下的焦点.而Chrome的成功离不开站在其背后的JavaScript引擎V8. 随着V ...