無刷新分頁 Ajax,JQuery,Json
阿新 • • 發佈：2017-05-11
oid 語句 字段 eve msg .html 分享 roc pro
/* */ and t.rownum<[email protected]
1.數據庫設計
字段：Id(int) , Msg(varchar(MAX)) , PostDate(datetime)
2.自定義SQL查詢方法(強類型DataSet)
//SelectCount()方法,用於查詢總條數
select count(*) from T_Posts
//GetPageData(startRowIndex,endRowIndex)方法,用於查詢指定範圍,分頁功能,
由於不支持over語句,因此需手動增加參數,方法-右鍵-屬性,裏面的 Parameters
增加startRowIndex 和 endRowIndex,類型為 Int32
select * from
(
select Id, Msg,PostDate,Row_Number()over(order by PostDate)rownum from T_Posts
)t
where t.rownum>[email protected]
3.HTML設置
<ul id="ulComment"></ul> <table> <tr id="trPage"></tr> </table>
4.處理頁設置 WSXFY.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request["action"]; //取得客戶提交上來的 action 值
if (action == "getpagecount") //此為查詢數據總條數
{
var adapter = new T_PostsTableAdapter();
int count = adapter.SelectCount().Value; //利用自定義SQL方法得到條數
int pagecount = count / 10; //條數除以10,得到頁數(10條一頁)
if (count % 10 != 0) //取條數的余數,沒有被10整除的,都加1
{
pagecount++;
}
context.Response.Write(pagecount); //輸出頁數
}
else if(action == "getpagedata") //此為查詢詳細數據
{
string pagenum = context.Request["pagenum"]; //得到當前頁號
int PageNum = Convert.ToInt32(pagenum); //轉換成INT型
var adapter = new T_PostsTableAdapter(); //創建DataSet
var data = adapter.GetPageData((PageNum - 1) * 10 + 1,(PageNum) * 10);
//使用自定義SQL方法,得到條數範圍
List<Comment> list = new List<Comment>(); //創建List類型為Comment
foreach (var row in data) //遍歷每一條數據
{
list.Add(new Comment() { Msg = row.Msg, PostDate = row.PostDate.ToShortDateString() });
//將每條數據都增加到List中
}
JavaScriptSerializer jss = new JavaScriptSerializer(); //創建 Json
context.Response.Write(jss.Serialize(list)); //將list轉換成Json類型
}
}
public class Comment //創建一個類
{
public string Msg { get; set; }
public string PostDate { get; set; }
}
5. Javascript設置
<script type="text/javascript">
$.post("WSXFY.ashx", { "action": "getpagecount" }, function(data, status) {
for (var i = 1; i <= data; i++) {
var td = $("<td><a href=‘‘>" + i + "</a></td>"); //循環輸出頁號
$("#trPage").append(td); //將每一個td都附加上去
}
$("#trPage td").click(function(e) {
e.preventDefault(); //阻止執行 href 的地址
$.post("WSXFY.ashx", { "action": "getpagedata", "pagenum": $(this).text() },
function(data, status) {
var comments = $.parseJSON(data); //利用 parseJSON 轉換
$("#ulComment").empty(); //清空ul
for (var i = 0; i < comments.length; i++) {
var comment = comments[i];
var li = $("<li>" + comment.PostDate + ":" + comment.Msg + "</li>"); //生成數據
$("#ulComment").append(li);
}
});
});
});
</script>
無刷新分頁 Ajax,JQuery,Json