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

       最近老大让我做一个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;

        }

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