首页 > 代码库 > 分页数据的新展示方式---瀑布流

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

2024-07-07 22:58:50   223人阅读

       最近老大让我做一个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层的代码如下：

+ View Code?
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做布局，代码如下：

+ View Code?
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部分的代码如下：

+ View Code?
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=http://www.mamicode.com/"../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 = http://www.mamicode.com/$.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处理如下：

+ View Code?
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;
       }

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

 


联系
我们