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

       最近老大让我做一个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中，为调用这个存储过程，加了一个方法，代码如下：

public static DataTable GetDataTableExt(out int iCount, params SqlParameter[] pars)
       {
           DataTable dt = null;
           int i = 0;
           using (SqlConnection conn = new SqlConnection(constr))
           {
               using (SqlCommand cmd=new SqlCommand("proc_Nav",conn))
               {
                   cmd.CommandType = CommandType.StoredProcedure;
                   if (pars != null)
                   {
                       cmd.Parameters.AddWithValue("@pageSize", pars[0].Value.ToString());
                       cmd.Parameters.AddWithValue("@pageIndex", pars[1].Value.ToString());

                       SqlParameter para3 = new SqlParameter("@total", SqlDbType.Int);
                       para3.Direction = ParameterDirection.Output;      //输出参数
                       cmd.Parameters.Add(para3);

                       using (SqlDataAdapter adapter=new SqlDataAdapter(cmd))
                       {
                           DataSet ds = new DataSet();
                           adapter.Fill(ds);
                           dt = ds.Tables[0];
                       }

                          //上面的代码执行完后，para3就有值了，为了保险起见，还是做一个判断
                       if (para3.Value != null)
                       {
                           i = int.Parse(para3.Value.ToString());   
                       }
                   }
               }
           }
           iCount = i;      //对输出参数赋值
           return dt;
       }

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;
        }

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