? ? ? ?最近老大讓我做一個js效果，要求頁面開始展示（比方說40條數(shù)據(jù)），當(dāng)鼠標(biāo)滾動到頁面底部時，再加載后面的數(shù)據(jù)。開始沒有半點(diǎn)頭緒，想到過jQuery插件，但是也沒怎么用起來，還是自己寫吧；可以肯定的一條思路是：當(dāng)滾動頁面底部時，肯定是去加載下一頁的數(shù)據(jù)了，這個時候頁面應(yīng)該沒有刷新的操作，所以想到了異步Ajax。

? ? ? 代碼部分，首先在SQL server中寫了一個存儲過程，

ALTER proc [dbo].[proc_Nav]
@pageSize int, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?--每頁顯示多少條
@pageIndex int, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?--當(dāng)前頁碼
@total int output ? ? ? ? ? ? ? ? ? ? ? ? ? ?--總記錄數(shù)
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 ? ? ? ? ? ? ? ?--算出總記錄數(shù)，并賦值給@total.

?

在SQLHelper中，為調(diào)用這個存儲過程，加了一個方法，代碼如下：

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; //輸出參數(shù) 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
//上面的代碼執(zhí)行完后，para3就有值了，為了保險起見，還是做一個判斷 26 if (para3.Value != null) 27 { 28 i = int.Parse(para3.Value.ToString()); 29 } 30 } 31 } 32 } 33 iCount = i; //對輸出參數(shù)賦值 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層調(diào)用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 () {
//定義一個變量，維護(hù)頁碼var iIndex = 1;LoadData(iIndex);var times;$(window).scroll(function () {if ($(window).scrollTop() == $(document).height() - $(window).height()) {clearTimeout(times);times = setTimeout(function () {// alert('到底了，開始加載入內(nèi)容');iIndex++;　　　　　　//頁碼+1，遞歸加載下一頁的數(shù)據(jù)LoadData(iIndex); });}});});//加載數(shù)據(jù)function LoadData(i) {//發(fā)送異步請求$.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轉(zhuǎn)換成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;}

　小弟不才，第一次寫這個效果；如果各位大神有認(rèn)為不合理的地方，可以提給我，共同進(jìn)步吧！寫在這里，算是給自己的一個小結(jié)。

?

轉(zhuǎn)載于:https://www.cnblogs.com/chens2865/p/3783820.html

總結(jié)

以上是生活随笔為你收集整理的分页数据的新展示方式---瀑布流的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。