AJAX分頁

查詢功能是開發中最重要的一個功能，大量數據的顯示，我們用的最多的就是分頁。

在ASP.NET 中有很多數據展現的控件，比如用的最多的GridView，它同時也自帶了分頁的功能。但是我們知道用GridView來顯示數據，如果沒有禁用ViewState，頁面的大小會是非常的大的。而且平時我們點擊首頁，下一頁，上一頁，尾頁這些功能都是會引起頁面回發的，也就是需要完全跟服務器進行交互，來回響應的時間，傳輸的數據量都是很大的。AJAX的分頁可以很好的解決這些問題。

開發的壞境是：jQuery AJAX+Northwind。

具體的步驟：

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var pageIndex = 0;
        var pageSize = 10;
        $(function () {
            $("#btnSearch").click(function () {
                /*
                name  顧客的名字, 文本框中輸入的內容
                0         表示的是第1頁
                10       每頁的大小
                */
                var name = $("#txtSearch").val();
                pageIndex = 0;
                AjaxGetData(name, pageIndex, pageSize);
            });
        });

        function AjaxGetData(name, index, size) {
            $.ajax({
                url: "jQueryPaging.aspx",
                type: "Get",
                data: "Name=" + name + "&PageIndex=" + index + "&PageSize=" + size,
                dataType: "json",
                success: function (data) {
                    var htmlStr = "";
                    htmlStr += "<table>"
                    htmlStr += "<thead>"
                    htmlStr += "<tr><td>CustomerID</td><td>CompanyName</td><td>ContactName</td><td>ContactTitle</td><td>Address</td><td>City</td></tr>"
                    htmlStr += "</thead>";
                    htmlStr += "<tbody>"
                    for (var i = 0; i < data.Customers.length; i++) {
                        htmlStr += "<tr>";
                        htmlStr += "<td>" + data.Customers[i].CustomerID + "</td>"
                                          + "<td>" + data.Customers[i].CompanyName + "</td>"
                                          + "<td>" + data.Customers[i].ContactName + "</td>"
                                          + "<td>" + data.Customers[i].ContactTitle + "</td>"
                                          + "<td>" + data.Customers[i].Address + "</td>"
                                          + "<td>" + data.Customers[i].City + "</td>"
                        htmlStr += "</tr>";
                    }
                    htmlStr += "</tbody>";
                    htmlStr += "<tfoot>";
                    htmlStr += "<tr>";
                    htmlStr += "<td colspan='6'>";
                    htmlStr += "<span>共有記錄" + data.Count + ";共<span id='count'>" + (data.Count % 10 == 0 ? parseInt(data.Count / 10) : parseInt(data.Count / 10 + 1)) + "</span>頁" + "</span>";
                    htmlStr += "<a href='javascript:void' onclick='GoToFirstPage()' id='aFirstPage' >首    頁</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >前一頁</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>後一頁</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾    頁</a>&nbsp;&nbsp; ";
                    htmlStr += "<input type='text' /><input type='button'  value='跳轉' onclick='GoToAppointPage(this)' /> ";
                    htmlStr += "</td>";
                    htmlStr += "</tr>";
                    htmlStr += "</tfoot>";
                    htmlStr += "</table>";

                    $("#divSearchResult").html(htmlStr);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest);
                    alert(textStatus);
                    alert(errorThrown);
                }
            });
        }
        //首頁
        function GoToFirstPage() {
            pageIndex = 0;
            AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //前一頁
        function GoToPrePage() {
            pageIndex -= 1;
            pageIndex = pageIndex >= 0 ? pageIndex : 0;
            AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //後一頁
        function GoToNextPage() {
            if (pageIndex + 1 < parseInt($("#count").text())) {
                pageIndex += 1;
            }
                AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //尾頁
        function GoToEndPage() {
            pageIndex = parseInt($("#count").text()) - 1;
            AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //跳轉
        function GoToAppointPage(e) {
            var page = $(e).prev().val();
            if (isNaN(page)) {
                alert("請輸入數字!");
            }
            else {
                var tempPageIndex = pageIndex;
                pageIndex = parseInt($(e).prev().val())-1;
                if (pageIndex < 0 || pageIndex >= parseInt($("#count").text())) {
                    pageIndex = tempPageIndex;
                    alert("請輸入有效的頁面範圍!");
                }
                else {
                    AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
                }
            }
        }
    </script>

數據的傳輸用的JSON格式。大家知道JSON是輕量級別的數據傳輸。前臺的展現時用的table。這樣生成的HTML代碼很簡潔。

HTML如下：

<div>
            <input type="text" id="txtSearch" />
            <input type="button" id="btnSearch" value="Search" />
    </div>
    <div id="divSearchResult">
  
    </div>