最近老大让我做一个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层的代码如下：
|
1
2
3
4
5
6
7
8
9
10
11 |
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做布局，代码如下：
|
1
2
3
4
5
6
7
8 |
<table> <thead> <tr> <th>编号</th><th>城市ID</th><th>城市名</th><th>父级ID</th> </tr> </thead> <tbody id="tbody1"></tbody> </table> |
下面要做的是，用js去填充tbody1。js部分的代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 |
<script src="../Scripts/jquery-1.8.0.min.js"
type="text/javascript"></script> <script type="text/javascript"> $(function () {<br> //定义一个变量，维护页码 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处理如下：
|
1
2
3
4
5
6
7
8
9
10
11
12 |
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（）方法的代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
//将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; } |
小弟不才，第一次写这个效果；如果各位大神有认为不合理的地方，可以提给我，共同进步吧！写在这里，算是给自己的一个小结。
分页数据的新展示方式---瀑布流,布布扣,bubuko.com
原文：http://www.cnblogs.com/chens2865/p/3783820.html