首頁 > 其他

JQuery和JSon實現的無重新整理分頁

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

相信大家都上過優酷吧，當你在看一個視頻的時候，你想看看視頻下面的評論，點擊了第2頁的評論，整個頁面重新整理，那麼視頻從頭開始播放，相信這會被使用者罵死的。

  

  

而無重新整理分頁可以解決這個問題，上面播放著視頻，下面我點下一頁看著評論，現在大部分的網站都是無重新整理分頁。

源碼如下（我是採用一頁顯示10條記錄）：

需要四個檔案

一個實體類檔案  CategoryInfoModel.cs

一個SqlHelper    SQLHelper.cs

一個AJAX服務端處理常式   PagedService.ashx

一個用戶端調用頁面   WSXFY.htm

CategoryInfoModel.cs和SQLHelper.cs我就不寫了，都知道是什麼檔案

PagedService.ashx 代碼如下

using System.Web.Script.Serialization;

public void ProcessRequest(HttpContext context)
 {
            context.Response.ContentType = "text/plain";
            string strAction = context.Request["Action"];
            //取頁數
            if (strAction == "GetPageCount")
            {
                string strSQL = "SELECT COUNT(*) FROM CategoryInfo";
                int intRecordCount = SqlHelper.ExecuteScalar(strSQL);
                int intPageCount = intRecordCount / 10;
                if (intRecordCount % 10  !=  0)
                {
                    intPageCount++;
                }
                context.Response.Write(intPageCount);
            }//取每頁資料
            else if (strAction == "GetPageData")
            {
                string strPageNum = context.Request["PageNum"];
                int intPageNum = Convert.ToInt32(strPageNum);
                int intStartRowIndex = (intPageNum - 1) * 10 + 1;
                int intEndRowIndex = (intPageNum) * 10 + 1;
                string strSQL = "SELECT * FROM ( SELECT ID,CategoryName,Row_Number() OVER(ORDER BY ID ASC) AS rownum FROM CategoryInfo) AS t";
                strSQL += " WHERE t.rownum >= " + intStartRowIndex + " AND t.rownum <= " + intEndRowIndex;
                DataSet ds = new DataSet();
                SqlConnection conn = SqlHelper.GetConnection();
                ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, strSQL);
                List<CategoryInfoModel> categoryinfo_list = new List<CategoryInfoModel>();//定義實體集合
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                   CategoryInfoModel categoryinfo = new CategoryInfoModel();
                   categoryinfo.CategoryInfoID = Convert.ToInt32(ds.Tables[0].Rows[i]["ID"]);
                   categoryinfo.CategoryName = ds.Tables[0].Rows[i]["CategoryName"].ToString();
                   categoryinfo_list.Add(categoryinfo);
                }
                JavaScriptSerializer jss = new JavaScriptSerializer();
                context.Response.Write(jss.Serialize(categoryinfo_list));//序列化實體集合為javascript對象
            }
  }

  WSXFY.htm 代碼如下

<head>
   <title>無重新整理分頁</title>
  <script type="text/javascript" src="../Scripts/jquery-1.5.1.min.js"></script>
   <script type="text/javascript">
        $(function () {
            $.post("PagedService.ashx", { "Action": "GetPageCount" }, function (response, status) {
                for (var i = 1; i <= response; i++) {
                    var td = $("<td><a href=''>" + i + "</a></td>");
                    $("#trPage").append(td);
                    td.click(function (e) {
                        e.preventDefault(); //不要導向連結
                        $.post("PagedService.ashx", { "Action": "GetPageData", "PageNum":$(this).text() }, function (response, status) {
                                var categorys = $.parseJSON(response);
                                $("#ulCategory").empty();
                                for (var i = 0; i < categorys.length; i++) {
                                    var category = categorys[i];
                                    var li = $("<li>" + category.CategoryInfoID + "-" + category.CategoryName + "</li>");
                                    $("#ulCategory").append(li);
                                }
                        });
                    });
                }
            });
        });
  </script>
</head>
<body>
<ul id="ulCategory"></ul>
<table>
<tr id="trPage">
</tr>
</table>
</body>
</html>

 效果如下（頁面好不好看取決於你畫DOM 的水平了，我這裡只是簡單的畫了畫）

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More