jPager一個適合Ajax+JSON+jQuery環境使用的多功能頁碼欄_AJAX教程
推薦:詳解Ajax標簽導航實例之前整理發表了《XMLHTTPRequest的屬性和方法簡介》,它ajax要使用的核心的技術之一,現在就來實際運用它。這個Ajax標簽導航,是我很久前就寫的一個腳本,很實用的(還被很多網站收錄了哦),現在拿它來做實例講解吧!當然個人能力有限,有什么不對的地方還請
new XElement("Colum2", guid.Substring(3,3) + rdn.Next(100).ToString() + "_C2 in " + i.ToString()),new XElement("Colum3", guid.Substring(6,3) + rdn.Next(100).ToString() + "_C3 in " + i.ToString())
);
dsInfos.Add(dsInfo);//填充數據
}
//保存
dsInfos.Save(dataSourceFilePath);
}
return XElement.Load(dataSourceFilePath);
}
public static string ToJSON(object obj)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(obj);
}
//private static void GetJSON(XElement dsXML)
//{
// var dsLinq = (from x in dsXML.Descendants("DataTemp")
// select new DataSourceModel()
// {
// ID = x.Element("ID").Value,
// Group = x.Element("Group").Value,
// Colum1 = x.Element("Colum1").Value,
// Colum2 = x.Element("Colum2").Value,
// Colum3 = x.Element("Colum3").Value
// });
// int totalCount = dsLinq.Count();//記錄總數,在此只起到示范作用,客戶端的記錄總數可以從JSON數據的data計數獲取
// System.Text.StringBuilder sb = new System.Text.StringBuilder();
// sb.Append("{");
// sb.Append("totalCount:");
// sb.Append(totalCount.ToString());
// sb.Append(",data:");
// sb.Append(ToJSON(dsLinq.ToList()));
// sb.Append("}");
//}
public bool IsReusable
{
get
{
return false;
}
}
}
//數據源結構
public class DataSourceModel
{
public string ID { get; set; }
public string Group { get; set; }
public string Colum1 { get; set; }
public string Colum2 { get; set; }
public string Colum3 { get; set; }
}
}
上面我用XML模擬了一個數據源,正好順便嘗試了一下Linq to XML:)如果您是使用.NET2.0的話,也可改成XMLDocument的方式或者從自己的數據源獲取。
這里我們看一下基本效果:
基本狀態:
如果超過相鄰頁數地閥值的頁碼用...替代:
下面我們升級一下,可以自定義沒頁顯示得條數和跳至的頁碼:
光這樣當然是不夠的,如果用戶輸入了無效的值,會引發無效的服務器響應,我們需要在客戶端就過濾:
一共300條數據,每頁10條,只能顯示30頁,要31頁當然就錯了。當然這里我的驗證過程只是提供了一條思路,還可以有更多的豐富。(咦?光影魔術手不注冊還會有水印?)
剛才我說的需要能自定義樣式,當然也不能少:
或者這樣:
或者這樣:
分享:詳解-CSS技巧篇CSS技巧篇(position屬性的運用技巧) 下面開始我們的分析了,先來看看這段XHTML代碼: ul class=tabs id=news li class=first id=news-0a href=news/news0.htm網站重構/aspan/span/li li id=news-1a href=news/news1.htmCSS布局實錄/aspan/sp
- 相關鏈接:
- 教程說明:
AJAX教程-jPager一個適合Ajax+JSON+jQuery環境使用的多功能頁碼欄
。