分页数据的新展示方式---瀑布流

最近老大让我做一个js效果，要求页面开始展示（比方说40条数据），当鼠标滚动到页面底部时，再加载后面的数据。开始没有半点头绪，想到过jQuery插件，但是也没怎么用起来，还是自己写吧；可以肯定的一条思路是：当滚动页面底部时，肯定是去加载下一页的数据了，这个时候页面应该没有刷新的操作，所以想到了异步Ajax。

代码部分，首先在SQL server中写了一个存储过程，

ALTER proc [dbo].[proc_Nav]
@pageSize int, --每页显示多少条
@pageIndex int, --当前页码
@total int output --总记录数
as
select top (@pageSize) * from city
where ID not in
(
select top (@pageSize*@pageIndex) ID from city
order by cityID desc
)
order by cityID desc

select @total= COUNT(0) from city --算出总记录数，并赋值给@total.

在SQLHelper中，为调用这个存储过程，加了一个方法，代码如下：

 1 public static DataTable GetDataTableExt(out int iCount, params SqlParameter[] pars)
 2        {
 3            DataTable dt = null;
 4            int i = 0;
 5            using (SqlConnection conn = new SqlConnection(constr))
 6            {
 7                using (SqlCommand cmd=new SqlCommand("proc_Nav",conn))
 8                {
 9                    cmd.CommandType = CommandType.StoredProcedure;
10                    if (pars != null)
11                    {
12                        cmd.Parameters.AddWithValue("@pageSize", pars[0].Value.ToString());
13                        cmd.Parameters.AddWithValue("@pageIndex", pars[1].Value.ToString());
14
15                        SqlParameter para3 = new SqlParameter("@total", SqlDbType.Int);
16                        para3.Direction = ParameterDirection.Output;      //输出参数
17                        cmd.Parameters.Add(para3);
18
19                        using (SqlDataAdapter adapter=new SqlDataAdapter(cmd))
20                        {
21                            DataSet ds = new DataSet();
22                            adapter.Fill(ds);
23                            dt = ds.Tables[0];
24                        }
25                           //上面的代码执行完后，para3就有值了，为了保险起见，还是做一个判断
26                        if (para3.Value != null)
27                        {
28                            i = int.Parse(para3.Value.ToString());
29                        }
30                    }
31                }
32            }
33            iCount = i;      //对输出参数赋值
34            return dt;
35        }

DAL层的代码如下：

public DataTable GetModelList(out int iCount,params SqlParameter[] para){int i = 0;DataTable dt=null;if (para!=null){dt = SQLHelper.GetDataTableExt(out i, para);}iCount = i;return dt;}

　BLL层调用DAL层这个方法。

界面上用一个table做布局，代码如下：

<table><thead><tr><th>编号</th><th>城市ID</th><th>城市名</th><th>父级ID</th></tr></thead><tbody id="tbody1"></tbody></table>

　　下面要做的是，用js去填充tbody1。js部分的代码如下：

<script src="../Scripts/jquery-1.8.0.min.js" type="text/javascript"></script><script type="text/javascript">$(function () {           //定义一个变量，维护页码var iIndex = 1;LoadData(iIndex);var times;$(window).scroll(function () {if ($(window).scrollTop() == $(document).height() - $(window).height()) {clearTimeout(times);times = setTimeout(function () {//                        alert('到底了，开始加载入内容');iIndex++;　　　　　　//页码+1，递归加载下一页的数据LoadData(iIndex);      });}});});//加载数据function LoadData(i) {//发送异步请求$.post("Demo.ashx", { "size": 60, "index": i }, function (data) {var jsonData = $.parseJSON(data);for (var i = 0; i < jsonData.length; i++) {$("#tbody1").append("<tr><td>" + jsonData[i].ID + "</td><td>" + jsonData[i].cityID + "</td><td>" + jsonData[i].cityName + "</td><td>" + jsonData[i].PId + "</td></tr>");}});}</script>

　　后台的Demo.ashx处理如下：

context.Response.ContentType = "text/plain";BLL.CityBll cityBll = new BLL.CityBll();SqlParameter[] paras = new SqlParameter[]{new SqlParameter("@pageSize",context.Request["size"]),new SqlParameter("@pageIndex",context.Request["index"]),new SqlParameter("@total",System.Data.SqlDbType.Int)};int iCount=0;DataTable dt = cityBll.GetModelList(out iCount, paras);List<CityModel> model = DataTableToList(dt);System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();context.Response.Write(jsSerializer.Serialize(model));

　　DataTableToList（）方法的代码如下：

 //将DataTable转换成List集合的方法private List<CityModel> DataTableToList(DataTable dt){List<CityModel> modelLst = new List<CityModel>();foreach (DataRow row in dt.Rows){CityModel model = new CityModel();model.cityID = int.Parse(row["cityID"].ToString());model.cityName = row["cityName"].ToString();model.ID = int.Parse(row["ID"].ToString());model.PId = int.Parse(row["PId"].ToString());modelLst.Add(model);}return modelLst;}

　小弟不才，第一次写这个效果；如果各位大神有认为不合理的地方，可以提给我，共同进步吧！写在这里，算是给自己的一个小结。

转载于:https://www.cnblogs.com/chens2865/p/3783820.html

分页数据的新展示方式---瀑布流相关推荐

CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
AJAX异步实现简单的瀑布流
传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...
教你如何实现一个完美的移动端瀑布流组件（附源码）
背景瀑布流是大家日常开发过程中经常遇到的一个场景,我们公司内部的组件库中也提供了一些解决方案.但这些方案适用场景都很单一,且每个实现方案都或多或少存在一些问题,基于此,我们设计与开发了一个兼容多场景 ...
JS 效果集合(回到顶部、轮播图、瀑布流、图片帧播放)
回到顶部 <style type="text/css">#btn {width:40px; height:40px; position:fixed; right:65p ...
【实战】1364- 实现一个完美的移动端瀑布流组件（附源码）
背景瀑布流是大家日常开发过程中经常遇到的一个场景,我们公司内部的组件库中也提供了一些解决方案.但这些方案适用场景都很单一,且每个实现方案都或多或少存在一些问题,基于此,我们设计与开发了一个兼容多场景 ...
Android之自定义瀑布流式的标签列表
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/50965588 本文出自:[顾林海的博客] ##前言由于一些原因,马上 ...
图片瀑布流差异化设计尝试
从pinterest后,瀑布流果然也逃不出国人的魔掌,成为了不少网站竞相模仿的对象.从效果上来看,这样的布局确实给人以耳目一新的感觉.美丽说.蘑菇街.花瓣也已经成为大家非常喜爱的网站,其中瀑布流功不可 ...
网页瀑布流效果实现的几种方式
前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb i ...
.Net/C#分库分表高性能O(1)瀑布流分页
框架介绍依照惯例首先介绍本期主角:ShardingCore 一款ef-core下高性能.轻量级针对分表分库读写分离的解决方案,具有零依赖.零学习成本.零业务代码入侵 dotnet下唯一一款全自动分表 ...

分页数据的新展示方式---瀑布流

分页数据的新展示方式---瀑布流相关推荐

最新文章

热门文章