利用jQuery实现分页查询与表格数据绑定

查询功能是开发中最重要的一个功能，大量数据的显示，我们用的最多的就是分页。

在ASP.NET 中有很多数据展现的控件，比如用的最多的GridView，它同时也自带了分页的功能。但是我们知道用GridView来显示数据，如果没有禁用ViewState，页面的大小会是非常的大的。而且平时我们点击首页，下一页，上一页，尾页这些功能都是会引起页面回发的，也就是需要完全跟服务器进行交互，来回响应的时间，传输的数据量都是很大的。AJAX的分页可以很好的解决这些问题。

开发的坏境是：jQuery AJAX+Northwind。


具体的步骤：

SearchCustomer.aspx:


<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; ";