無重新整理分頁 Ajax,JQuery,Json

標籤：代碼   定義   客戶   each   ons   cli   and   row   ber   

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] and 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