最近老大让我做一个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
时间： 2024-10-13 11:16:32
