jquery 数据分批加载 asp.net

<link type="text/css" rel="stylesheet" href="http://a.tbcdn.cn/p/global/1.0/global-min.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pager.js"></script>
<script type="text/javascript" src="userjs/textcase.js"></script>

 

body 里面内容

................

<div class="case">
            <ul id="result" class="bookmark-list">
            </ul>
            <div class="cb"></div>
</div> 

.................

 

textcase.js 文件

 

var shits;//记载分页数,这个别无它意,因为在做过程中遇到问题,所以这样取名
var c = 1;//这个是记载触发了多少次

//页面加载完的时候进行初始化操作
   jQuery(document).ready(function () {
    GetTotal(); //异步取得总页数
    PageClick(1); //页面初次加载时显示第一页
});

function GetTotal() {
    jQuery.ajax({
        url: 'webashx/testcasecount.ashx',
        success: function (data) {
            shits = data;
        }
    });
}

//单节分页导航数字是执行异步加载数据
PageClick = function (pageclickednumber) {
    jQuery.ajax({
        url: 'webashx/textcase.ashx',
        type: 'Get',
        data: { pageindex: pageclickednumber },
        success: function (data) {
            jQuery("#result").append(data);
        }
    });
}
//这个是根据滚动条分批加载方法,滚动条拉到底部触发
window.onscroll = function () {
    var winScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (winScroll == (document.body.offsetHeight - document.documentElement.clientHeight)) {
        c += 1;
        PageClick(c);
    }
}

testcasecount.ashx 文件

 

 public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        Entity.Library.C_caseinfo ty = new Entity.Library.C_caseinfo();
        Query.Library.C_caseinfoQuery qc = new Query.Library.C_caseinfoQuery(ty);
        int kk = qc.getsycount();
        double tmps = kk / 5.0; //每页显示5条,所以除5.0
        string sdsd = System.Math.Round(tmps, 0).ToString();
        context.Response.Write(sdsd.ToString());
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

 

textcase.ashx 文件

using System;
using System.Web;
using System.Text;
public class textcase : IHttpHandler
{

    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";

        string pageIndex = context.Request["pageindex"];//触发次数

        Entity.Library.C_caseinfo ty = new Entity.Library.C_caseinfo();
        Query.Library.C_caseinfoQuery qc = new Query.Library.C_caseinfoQuery(ty);

        var kk = qc.GetpageTable(pageIndex, "5");//第几页,每页显示5条数据,获取数据源

        StringBuilder sb = new StringBuilder();
 foreach(var c in kk)
        {
            sb.Append("<li class='bookmark-item'>");
            sb.Append("<span class='bookmark-item-img'><a href='casecontent.aspx?id="+c.Id+"' title='"+c.Titles+"'><img src='"+c.Imgurl.Replace("../","")+"' alt='"+c.Titles+"' /></a> </span>");
            sb.Append("<div class='bookmark-item-nav'>");
            sb.Append("<div class='bookmark-item-title'><a href='casecontent.aspx?id="+c.Id+"' title='"+c.Titles+"'>"+c.Titles+"</a> </div>");
            sb.Append("<div class='bookmark-item-info'>");
            sb.Append("<p>設計概念: </p>");
            sb.Append("<p>"+c.Desctiption+"</p>");
            sb.Append("</div>");
            sb.Append("<p class='design'><a href='images/UploadFiles/2.jpg' target='_blank' title='旧设计'>旧设计</a> <a class='new' href='casecontent.html' title='新网站'>新网站</a></p>");
            sb.Append("</div>");
            sb.Append("</li>");         

        }
        context.Response.Write(sb.ToString());
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值