asp.net---jquery--ajax 实现滚动条滚动到底部分页显示
2024-04-16 20:36:25
前台：aspx页面
1 var bgtime = $(" #date1 ").val();
2 var overtime = $(" #date2 ").val();
3 var gsid = "0";
4 var typename = "";
5 var divstyle = "";
6 var bgpage; //定义开始页面
7 var recordCount; //数据总条数
8 var pageCount; //总页数
9 //页面加载完成执行
10 $(document).ready(function(){
11 //$("#date1").attr("value", getNowFormatDate());//推荐这种写法,可正常赋值
12 $("#date2").attr("value", getNowFormatDate());
13 bgtime = $(" #date1 ").val();
14 overtime = $(" #date2 ").val();
15 typename = "全部";
16 $("#gs").html("");
17 $("#data-content").html("");
18 $("#leibie").html("");
19 $("#gs").append("<div class=\"xuanze xuanze-active\" name=\"0\">全部公司<span class=\"my-icon mui-icon mui-icon-checkmarkempty\"></span></div>");
20 $("#leibie").append("<div class=\"xuanze xuanze-active\" name=\"全部\">全部<span class=\"my-icon mui-icon mui-icon-checkmarkempty\"></span></div>");
21 InitPage(1,10); //这里是调用InitPage(pageIndex,pageSize)方法,pageIndex:起始页，pageSize:每页的数据条数
22 });
23 //监听滚轮事件
24 window.onscroll = function () {
25 if (getScrollHeight() == getWindowHeight() + getDocumentTop()) { //当滚动条到底时,这里是触发内容
26 //异步请求数据,局部刷新dom
27 if (bgpage >= parseInt(pageCount)) //开始页数大于所有数据总页数
28 {
29 alert("已经到底部了")
30 }
31 else {
32 alert(bgpage) //页数
33 onscoll(bgpage, 10);调用onscoll(pageIndex,pageSize)
34 }
35 }
36 };
37 //页面加载完成添加数据的方法
38 function InitPage(pageIndex, pageSize) {
39 $.ajax({
40 url: "SlcBuyTp.ashx",
41 type: 'post',
42 //contentType: "application/json;charset=UTF-8",
43 data: { "gsname": gsid, "bgtime": bgtime, "overtime": overtime, "type": typename, "pageIndex": pageIndex, "pageSize": pageSize },//encodeURI(encodeURI(typename)) escape(typename)
44 cache: true,
45 success: function (d) {
46 //alert(d);
47 //console.log(new Date().getTime());
48 var obj = eval('(' + d + ')'); //数组
49 recordCount = obj.table2[0].recordcount; //记录数据总条数
50 pageCount = obj.table2[0].pagecount; //记录总页数
51 for (var index = 0; index < obj.gsname.length; index++) {
52 var item = obj.gsname[index];
53 $("#gs").append("<div class=\"xuanze\" name=\"" + item.gsid + "\">" + item.gsname + "<span class=\"my-icon mui-icon mui-icon-checkmarkempty\"></span></div>");
54 }
55 for (var index = 0; index < obj.type.length; index++) { //添加类型名称
56 var item = obj.type[index];
57 $("#leibie").append("<div class=\"xuanze\" name=\"" + item.leibie + "\">" + item.leibie + "<span class=\"my-icon mui-icon mui-icon-checkmarkempty\"></span></div>");
58 }
59 if (obj.datas.length == 0) {
60 var kong = "<div class=\"tb-content\"><div style=\"with:100%;hight:20px;text-align:center;position: absolute;margin: 50%;\">没有数据</div></div>"
61 $("#data-content").empty().append(kong);
62 }
63 else {
64 for(var i=0;i<obj.datas.length;i++)
65 {
66 var item = obj.datas[i];
67 divstyle = "<div class=\"tb-content\"><table class=\"tb\"><tr><td style=\"width:35%;\">单据日期：" + item.riqi + "</td><td style=\"width:65%\">订单接收方：" + item.jsgs + "</td></tr><tr><td>物料类别：" + item.typename + "</td><td>物料名称：" + item.name + "</td></tr><tr><td>规格型号：" + item.gg + "</td><td>采购备注：" + item.beizhu + "</td></tr><tr><td>计量单位：" + item.jldw + "</td><td>数量：" + item.shuliang + "</td></tr><tr><td>需求部门：" + item.xqbm + "</td><td>本币含税金额：" + item.bbje + "</td></tr><tr><td>需求人员：" + item.xqry + "</td><td>采购部门：" + item.cgbm + "</td></tr><tr><td>采购人员：" + item.cgry + "</td><td></td></tr></table></div>";
68 $("#data-content").append(divstyle);
69 }
70 };
71 bgpage=parseInt(pageIndex) + 1 //起始页+1
72 },
73 error: function (XMLHttpRequest, textStatus, errorThrown) {
74 alert("请求数据失败,XMLHttpRequest 对象:" + JSON.stringify(XMLHttpRequest) + ", 错误信息:" + textStatus + ", 捕获的错误对象:" + errorThrown);
75 },
76 });
77 }
78 //滚动条到底部添加数据的方法
79 function onscoll(pageIndex, pageSize) {
80 $.ajax({
81 url: "SlcBuyTp.ashx",
82 type: 'post',
83 //contentType: "application/json;charset=UTF-8",
84 data: { "gsname": gsid, "bgtime": bgtime, "overtime": overtime, "type": typename, "pageIndex": pageIndex, "pageSize": pageSize },//encodeURI(encodeURI(typename)) escape(typename)
85 cache: true,
86 success: function (d) {
87 //alert(d);
88 //console.log(new Date().getTime());
89 var obj = eval('(' + d + ')'); //数组
90 var recordCount = obj.table2[0].recordcount; //记录总条数
91 pageCount = obj.table2[0].pagecount; //记录总页数
92 if (obj.datas.length == 0) {
93 var kong = "<div class=\"tb-content\"><div style=\"with:100%;hight:20px;text-align:center;position: absolute;margin: 50%;\">没有数据</div></div>"
94 $("#data-content").empty().append(kong);
95 }
96 else {
97 for (var i = 0; i < obj.datas.length; i++) {
98 var item = obj.datas[i];
99 divstyle = "<div class=\"tb-content\"><table class=\"tb\"><tr><td style=\"width:35%;\">单据日期：" + item.riqi + "</td><td style=\"width:65%\">订单接收方：" + item.jsgs + "</td></tr><tr><td>物料类别：" + item.typename + "</td><td>物料名称：" + item.name + "</td></tr><tr><td>规格型号：" + item.gg + "</td><td>采购备注：" + item.beizhu + "</td></tr><tr><td>计量单位：" + item.jldw + "</td><td>数量：" + item.shuliang + "</td></tr><tr><td>需求部门：" + item.xqbm + "</td><td>本币含税金额：" + item.bbje + "</td></tr><tr><td>需求人员：" + item.xqry + "</td><td>采购部门：" + item.cgbm + "</td></tr><tr><td>采购人员：" + item.cgry + "</td><td></td></tr></table></div>";
100 $("#data-content").append(divstyle);
101 }
102 };
103 bgpage = parseInt(pageIndex) + 1 //起始页+1
104 },
105 error: function (XMLHttpRequest, textStatus, errorThrown) {
106 alert("请求数据失败,XMLHttpRequest 对象:" + JSON.stringify(XMLHttpRequest) + ", 错误信息:" + textStatus + ", 捕获的错误对象:" + errorThrown);
107 },
108 });
109 }后台：ashx页面
<%@ WebHandler Language="C#" Class="SlcBuyTp" %>using System;
using System.Web;
using System.Data;
using cschef;public class SlcBuyTp : IHttpHandler {protected static int RecordCount = 0; //记录数据总行数public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain";string type;string datas;string gsbh = context.Request.Form["gsname"];//如果是get方式应该用context.Request.QueryStringstring bgtime = context.Request.Form["bgtime"];//如果是get方式应该用context.Request.QueryStringstring overtime = context.Request.Form["overtime"];//如果是get方式应该用context.Request.QueryStringstring typename = context.Request.Form["type"];//如果是get方式应该用context.Request.QueryStringint pageIndex = CC.ToInt(context.Request.Form["pageIndex"]); //起始页int pageSize =CC.ToInt(context.Request.Form["pageSize"]);//每个页面数据条数#region 分页配置if (pageIndex == 0) { pageIndex = 1; }#endregionif (gsbh == "0"){if(typename == "全部"){datas = @"select CONVERT(varchar(100), djrq, 23) riqi,wllbmc typename,ghdw jsgs,wlmc name,cpgg gg,bz beizhu,jldw jldw,sl shuliang,bbje bbje,xqbm xqbm,xqry xqry,cgbm cgbm,cgry cgry from t_cgmx where djrq between '"+bgtime+"' and '"+overtime+"'";}else{datas = @"select CONVERT(varchar(100), djrq, 23) riqi,wllbmc typename,ghdw jsgs,wlmc name,cpgg gg,bz beizhu,jldw jldw,sl shuliang,bbje bbje,xqbm xqbm,xqry xqry,cgbm cgbm,cgry cgryfrom t_cgmx where djrq between '"+bgtime+"' and '"+overtime+"' and wllbmc='"+typename+"'";}}else{//gsbh!=0if(typename == "全部"){datas = @"select CONVERT(varchar(100), djrq, 23) riqi,wllbmc typename,ghdw jsgs,wlmc name,cpgg gg,bz beizhu,jldw jldw,sl shuliang,bbje bbje,xqbm xqbm,xqry xqry,cgbm cgbm,cgry cgryfrom t_cgmx where djrq between '"+bgtime+"' and '"+overtime+"' and gsbh='"+gsbh+"'";}else{datas =@"select CONVERT(varchar(100), djrq, 23) riqi,wllbmc typename,ghdw jsgs,wlmc name,cpgg gg,bz beizhu,jldw jldw,sl shuliang,bbje bbje,xqbm xqbm,xqry xqry,cgbm cgbm,cgry cgryfrom t_cgmx where djrq between '"+bgtime+"' and '"+overtime+"' and gsbh='"+gsbh+"'and wllbmc='"+typename+"'";}}DataTable TbDatas = new DataTable();TbDatas = DBHelper.DBContext.Default.GetDataTable(datas); RecordCount = TbDatas.Rows.Count; //数据总条数DataTable dtData = new DataTable(); //数据表if(RecordCount==0) //如果没有数据
{dtData = TbDatas;}else //否则
{dtData = GetPagedTable(TbDatas, pageIndex, pageSize);//调用 GetPagedTable(DataTable dt, int PageIndex, int PageSize)方法，为TbDatas进行分页
}DataTable dtCount = new DataTable(); //记录TbDatas数据表的总数据条数和总页数的表dtCount.TableName = "table2";dtCount.Columns.Add("recordcount"); //给一列命名 dtCount.Rows.Add(RecordCount); //添加dt的行数到dtCountdtCount.Columns.Add("pagecount"); //添加dt的行名，第二列dtCount.Rows[0]["pagecount"]=getPageCount(TbDatas.Rows.Count,pageSize); //将总数据页数添加到pagecount列dtData.TableName = "datas";DataSet ds = new DataSet();ds.Tables.Add(dtData);ds.Tables.Add(dtCount);string JsonString1 = Newtonsoft.Json.JsonConvert.SerializeObject(ds); //转换成json
context.Response.Write(JsonString1);}/// <summary> /// 对DataTable进行分页,起始页为1 /// </summary> /// <param name="dt">查询出的数据表</param> /// <param name="PageIndex">起始页</param> /// <param name="PageSize">每页数据条数</param> /// <returns></returns> public static DataTable GetPagedTable(DataTable dt, int PageIndex, int PageSize){if (PageIndex == 0)return dt;DataTable newdt = dt.Copy();newdt.Clear();int rowbegin = (PageIndex - 1) * PageSize;int rowend = PageIndex * PageSize;if (rowbegin >= dt.Rows.Count)return newdt;if (rowend > dt.Rows.Count)rowend = dt.Rows.Count;for (int i = rowbegin; i <= rowend - 1; i++){DataRow newdr = newdt.NewRow();DataRow dr = dt.Rows[i];foreach (DataColumn column in dt.Columns){newdr[column.ColumnName] = dr[column.ColumnName];}newdt.Rows.Add(newdr);}return newdt;}/// <summary> /// 获取总页数 /// </summary> /// <param name="sumCount">结果集数量</param> /// <param name="pageSize">页面数量</param> /// <returns></returns> public static int getPageCount(int sumCount, int pageSize){int page = sumCount / pageSize;if (sumCount % pageSize > 0){page = page + 1;}return page;}public bool IsReusable {get {return false;}}}转载于:https://www.cnblogs.com/wangxiaoyan/p/9520259.html
asp.net---jquery--ajax 实现滚动条滚动到底部分页显示相关推荐
- Asp.Net+Jquery.Ajax详解5-$.getScript
目录(已经更新的文章会有连接,从7月25日开始,每2到3天更新一篇): Asp.Net+Jquery.Ajax详解1-开篇(2012.07.25发) Asp.Net+Jquery.Ajax详解2-$. ...
- java 滚动条的事件_[Java教程]jquery如何判断滚动条滚到页面底部并执行事件
[Java教程]jquery如何判断滚动条滚到页面底部并执行事件 0 2016-04-27 10:00:13 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素, ...
- 关于div的滚动条滚动到底部，内容显示不全的问题。（已解决）
关于div的滚动条滚动到底部,内容显示不全的问题.(已解决) 参考文章: (1)关于div的滚动条滚动到底部,内容显示不全的问题.(已解决) (2)https://www.cnblogs.com/th ...
- asp.net ajax 源码,asp.net+jquery+ajax简单留言板 v1.2
asp.netC#+jquery1.4.1 +ajax留言板程序说明 采用asp.net C#+ jquery1.4.1 +ajax的实现 主要用aspx文件请求 还可以用ashx处理 ajax返回类 ...
- ajax调用asp.net,jQuery.ajax()调用asp.net后台方法(非常重要)
http://www.cnblogs.com/zxhoo/archive/2011/01/30/1947752.html 用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先 ...
- elementUI el-table设置fixed后，竖向滚动条滚动到底部表格错位的问题（修改源码）
问题:el-table在设置了fixed的条件下,滚动竖向滚动条到最底部的时候,会出现表格错位的问题. 原因:fixed部分也是一个表格,在有滚动条的时候没有加上滚动条的高度,所以会导致错位. 通过阅 ...
- vue-cli网页聊天室：当聊天室有新消息时，控制滚动条滚动到底部
做一个网页聊天室页面,功能需求是:当有新消息出现在聊天室页面时,控制页面滚动条滚动到页面底部: 聊天室页面代码如下: data中的消息列表: messageList: [{Character: &qu ...
- asp.net jquery.Ajax() 方法调用后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: view plaincopy to clip ...
- 隐藏ajax的调用地址,c# – ASP.NET jQuery Ajax调用代码隐藏方法
我对Web开发非常新鲜,但在开发方面有很多经验.我有一个ASP页面有几个输入字段和一个提交按钮.这个提交按钮纯粹叫$.ajax,我打算在代码隐藏文件中调用一个方法.不过,我注意到两件有趣的事情.首先, ...
- c# 获取ajax数据,c# asp.net jQuery AJAX 从 MySQL 中获取数据
解释想做什么.这(第 1 版)工作正常...... Default.aspx(版本 1.) $(document).ready(function () { setInterval(function ( ...
最新文章
- 关于node.js的误会
- python学不会的表情包-小学生绞尽脑汁也学不会的python(反射)
- Ubuntu下安装node和npm
- 【风控策略】大数据风控策略逻辑
- Python3 定向爬虫之“抓取糗事百科图片”
- stl中Priority Queues(优先队列)的基本用法
- python做excel表格柱状图_Python Excel 绘制柱形图
- 视频直播常见问题与解决办法汇总【系列三—直播推流】
- SpringBoot 精通系列-创建SpringBoot的入门项目
- 4-2-在Servlet中解决中文输出乱码问题
- 回归模型的score得分为负_逻辑回归评分卡实现和评估
- c#实现添加虚拟IP
- k8s之service
- 简单实现根据excel表生成sql 建表语句
- html input文字缩进,使用HTML Tidy来缩进HTML代码？
- 山东教师教育网博客空间--（他人博客）
- 怎样将html文件生成桌面动态壁纸,利用自定义桌面和HTML打造动态桌面图标
- IDEA鼠标悬停显示注释
- 201915 天融信防火墙TopGate500初探
- MATLAB高光谱图像处理基础