Asp.net Ajax(ashx)

主要实现 ajax分页功能
效果图

后台方法代码展示

 /// <summary>
    /// WebAjax处理类
    /// </summary>
    public class WebAjaxHandler : IHttpHandler, IRequiresSessionState
    {
        /// <summary>
        /// 实例可再次使用，则为 true；否则为 false。
        /// </summary>
        public bool IsReusable
        {
            get { return true; }
        }

        /// <summary>
        /// 当前Session
        /// </summary>
        protected HttpSessionState Session
        {
            get
            {
                return HttpContext.Current.Session;
            }
        }

        /// <summary>
        /// 当前Application
        /// </summary>
        protected HttpApplicationState Application
        {
            get
            {
                return HttpContext.Current.Application;
            }
        }

        /// <summary>
        /// 通过实现 System.Web.IHttpHandler 接口的自定义 HttpHandler 启用 HTTP Web 请求的处理。
        /// </summary>
        /// <param name="context">它提供对用于为 HTTP 请求提供服务的内部服务器对象（如 Request、Response、Session和 Server）的引用。</param>
        public void ProcessRequest(HttpContext context)


  ....................具体代码请下载demo

 /// <summary>
    /// PagingHandler 的摘要说明
    /// </summary>
    public class PagingHandler : WebAjaxHandler
    {
        public object Paging(Pagination pagination)
        {
            //分页为测试数据 数据库分页自行实现
            var list = new List<Model>();
            for (int i = 0; i < 100; i++)
            {
                list.Add(new Model { Id = i, Name = "name" + i, Age = i, Address = "address" + i, Mobile = "1355115457", Height = i, Weight = i, Remark ="格斯达克沙地上多空双方的伤口附近的客服电话开机"});
            }
            var startRow = (pagination.PageIndex - 1) * pagination.PageSize;
            var endRow = pagination.PageIndex * pagination.PageSize;
            pagination.RowCount = list.Count;
            return new
            {
                Data = list.Take(endRow).Skip(startRow),
                Pagination = pagination
            };
        }
    }

纯VUE

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>.net ajax 分页</title>
    <link href="../css/style.css" rel="stylesheet" />
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="table column">
            <table>
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>名字</th>
                        <th>年龄</th>
                        <th>地址</th>
                        <th>手机</th>
                        <th>身高</th>
                        <th>体重</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in sites">
                        <td>{{item.Id}}</td>
                        <td>{{item.Name}}</td>
                        <td>{{item.Age}}</td>
                        <td>{{item.Address}}</td>
                        <td>{{item.Mobile}}</td>
                        <td>{{item.Height}}</td>
                        <td>{{item.Weight}}</td>
                        <td>{{item.Remark}}</td>
                        <td>
                            <a href='javascript:operation(${Id});'>操作</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div v-show="dataCount > 0">
            <div class="dataPager">
                <template v-show="pageIndex > 1">
                    <a v-on:click="goPage(1)">首页</a>
                    <a v-on:click="goPage(pageIndex - 1)">上一页</a>
                </template>
                <span>
                    <template v-for="item in pageSizeArray">
                        <a v-if="item.isFirst == true" id="pager_lbPage{{item.value}}" disabled="disabled" class="yemaa" style="margin-left: 5px; margin-right: 5px; text-decoration: none;">{{item.value}}</a>
                        <a v-else="item.isFirst == false" v-on:click="goPage(item.value)" style="margin-left: 5px; margin-right: 5px; text-decoration: none;">{{item.value}}</a>
                    </template>
                </span>
                <span v-show="pageIndex < pageCount">
                    <a v-on:click="goPage(pageIndex + 1)">下一页</a>
                    <a v-on:click="goPage(pageCount)">末页</a>
                </span>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            pageSize: 10,  //页码
            pageIndex: 1, //当前页
            dataCount: 0,//总条数
            sites: [],      //数据
            pageCount: 0   //总页数
        },
        computed: {
            // 分页数据
            pageSizeArray: function () {
                var array = new Array();
                var index = this.pageIndex;
                var size = this.pageSize;
                for (var i = index - 4; i <= index + 4; i++) {
                    if (i === index) {
                        array.push({ isFirst: true, value: i });
                    } else if (i > 0 && i <= size) {
                        array.push({ isFirst: false, value: i });
                    }
                }
                return array;
            }
        },
        // 数据初次加载
        mounted: function () {
            this.queryPaging(1, this.pageSize);
        },
        methods: {
            // 分页事件
            goPage: function (pageIndex) {
                this.queryPaging(pageIndex, this.pageSize);
            },
            // 分页查询调侃
            getQueryPagination: function (pageIndex, pageSize) {
                return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true };
            },
            // 分页数据绑定
            bindData: function (self, data) {
                var d = data.Data;
                self.pageSize = data.Pagination.PageSize;
                self.pageIndex = data.Pagination.PageIndex;
                self.dataCount = data.Pagination.RowCount;
                self.pageCount = parseInt((self.dataCount + self.pageSize - 1) / self.pageSize);
                for (var i = 0; i < d.length; i++) {
                    self.$set(vm.sites, i, d[i]);
                }
            },
            // 分页ajax
            queryPaging: function (pageIndex, pageSize) {
                var self = this;
                if (!pageIndex) {
                    pageIndex = 1;
                }
                pageSize = pageSize || 10;
                var pagination = this.getQueryPagination(pageIndex, pageSize);
                var parameters = JSON.stringify({ "pagination": pagination });
                $.ajax({
                    type: "POST",
                    url: "/ajax/PagingHandler.ashx/Paging",
                    data: parameters,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (d) {
                        self.bindData(self, d);
                    },
                    timeout: 30000,
                    error: function (e) {
                        if (e.responseText === "") return;
                        if (e.status === 300) {
                            if (JSON.parse(e.responseText) === "RequireLogon") {
                                return;
                            } else if (JSON.parse(e.responseText) === "Unauthorized") {
                                return;
                            }
                        } else if (e.status === 401 && e.statusText === "Unauthorized") {
                            return;
                        }
                        if (e.statusText === "timeout") {
                            alert("服务器忙");
                        } else if (e) {
                            alert(e.responseText);
                        }
                    }
                });
            }
        }
    });
</script>

vue 替换jquerytemplate

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>.net ajax 分页</title>
    <link href="../css/style.css" rel="stylesheet" />
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../ajax/PagingHandler.ashx"></script>
</head>
<body>
    <div id="content" class="table column">
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>名字</th>
                    <th>年龄</th>
                    <th>地址</th>
                    <th>手机</th>
                    <th>身高</th>
                    <th>体重</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="app">
                <template v-for="item in sites">
                    <tr>
                        <td>{{item.Id}}</td>
                        <td>{{item.Name}}</td>
                        <td>{{item.Age}}</td>
                        <td>{{item.Address}}</td>
                        <td>{{item.Mobile}}</td>
                        <td>{{item.Height}}</td>
                        <td>{{item.Weight}}</td>
                        <td>{{item.Remark}}</td>
                        <td>
                            <a href='javascript:operation(${Id});'>操作</a>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
    <div id="pager"></div>
</body>
</html>
<script>
    /*
   jauery js分页函数
   container：分页容器jquery对象
   pageIndex：当前页码
   pageSize：页大小
   dataCount：总页数
   pageChangedCallback：页面单击回调函数
   */
    function drawPagination(container, pageIndex, pageSize, dataCount, pageChangedCallback) {
        if (dataCount > 0) {
            var pageCount = parseInt((dataCount + pageSize - 1) / pageSize);
            var contents = new Array();
            contents.push('<div class="dataPager clearfix">');
            if (pageIndex > 1) {
                contents.push('<a id="pager_lbnFirst" value=1>首页</a>');
                contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + '>&lt; 上一页</a>');
            }
            contents.join('<span id="pPages">');
            for (var i = pageIndex - 4; i <= pageIndex + 4; i++) {
                if (i === pageIndex) {
                    contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>');
                } else if (i > 0 && i <= pageCount) {
                    contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' style="margin-left:5px;margin-right:5px;">' + i + '</a>');
                }
            }
            contents.join('</span>');
            if (pageIndex < pageCount) {
                contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + '>下一页 &gt;</a>');
                contents.push('<a id="pager_lbnLast" value=' + pageCount + '>末页</a>');
            }
            contents.push('共 <span id="pager_lblTotalCount">' + dataCount);
            contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize);
            contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>');
            container.html(contents.join(''));
            if (pageChangedCallback) {
                $("a", container).click(function () {
                    var self = $(this);
                    if (!self.attr("disabled")) {
                        pageChangedCallback(parseInt(self.attr("value")));
                    }
                });
            }
            container.show();
        } else {
            container.html('');
            container.hide();
        }
    }

    function getQueryOrdersPagination(pageIndex, pageSize) {
        return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true };
    }

    var vm = null;
    function bindData(data) {
        var d = data.Data;
        if (vm === null) {
            vm = new Vue({
                el: '#app',
                data: { sites: d }
            });
        } else {
            for (var i = 0; i < d.length; i++) {
                vm.$set(vm.sites, i, d[i]);
                // Vue.set(vm.sites, i, d[i]);
            }    
        }
        drawPagination($("#pager"), data.Pagination.PageIndex, data.Pagination.PageSize, data.Pagination.RowCount, queryOrders);
    }

    function queryOrders(pageIndex, pageSize) {
        if (!pageIndex) pageIndex = 1;
        pageSize = pageSize || 10;
        var pagination = getQueryOrdersPagination(pageIndex, pageSize);
        $.net.PagingHandler.Paging(pagination, function (data) {
            bindData(data);
        }, function (e) {
            if (e.statusText === "timeout") {
                alert("服务器忙");
            } else {
                alert(e.responseText);
            }
        });
        return false;
    }

    window.onload = function () {
        queryOrders(1, 10);
    };
</script>

.net嵌入脚本实现如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>.net ajax 分页</title>
    <link href="../css/style.css" rel="stylesheet" />
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/jquerytemplate.js"></script>
    <script src="../ajax/PagingHandler.ashx"></script>
    <!--jquery template-->
    <script type="text/x-jquery-tmpl" id="temp">
        <tr>
            <td>${Id}</td>
            <td>${Name}</td>
            <td>${Age}</td>
            <td>${Address}</td>
            <td>${Mobile}</td>
            <td>${Height}</td>
            <td>${Weight}</td>
            <td>${Remark}</td>
            <td>
                <a href='javascript:operation(${Id});'>操作</a>
            </td>
        </tr>
    </script>
</head>
<body>
    <div id="content" class="table column">
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>名字</th>
                    <th>年龄</th>
                    <th>地址</th>
                    <th>手机</th>
                    <th>身高</th>
                    <th>体重</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="pager"></div>
</body>
</html>
<script>
    /*
   jauery js分页函数
   container：分页容器jquery对象
   pageIndex：当前页码
   pageSize：页大小
   dataCount：总页数
   pageChangedCallback：页面单击回调函数
   */
    function drawPagination(container, pageIndex, pageSize, dataCount, pageChangedCallback) {
        if (dataCount > 0) {
            var pageCount = parseInt((dataCount + pageSize - 1) / pageSize);
            var contents = new Array();
            contents.push('<div class="dataPager clearfix">');
            if (pageIndex > 1) {
                contents.push('<a id="pager_lbnFirst" value=1>首页</a>');
                contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + '>&lt; 上一页</a>');
            }
            contents.join('<span id="pPages">');
            for (var i = pageIndex - 4; i <= pageIndex + 4; i++) {
                if (i === pageIndex) {
                    contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>');
                } else if (i > 0 && i <= pageCount) {
                    contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' style="margin-left:5px;margin-right:5px;">' + i + '</a>');
                }
            }
            contents.join('</span>');
            if (pageIndex < pageCount) {
                contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + '>下一页 &gt;</a>');
                contents.push('<a id="pager_lbnLast" value=' + pageCount + '>末页</a>');
            }
            contents.push('共 <span id="pager_lblTotalCount">' + dataCount);
            contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize);
            contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>');
            container.html(contents.join(''));
            if (pageChangedCallback) {
                $("a", container).click(function () {
                    var self = $(this);
                    if (!self.attr("disabled")) {
                        pageChangedCallback(parseInt(self.attr("value")));
                    }
                });
            }
            container.show();
        } else {
            container.html('');
            container.hide();
        }
    }

    function getQueryOrdersPagination(pageIndex, pageSize) {
        return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true };
    }

    function bindData(data) {
        $("#content table tbody").html($("#temp").tmpl(data.Data));
        drawPagination($("#pager"), data.Pagination.PageIndex, data.Pagination.PageSize, data.Pagination.RowCount, queryOrders);
    }

    function queryOrders(pageIndex, pageSize) {
        if (!pageIndex) pageIndex = 1;
        pageSize = pageSize || 10;
        var pagination = getQueryOrdersPagination(pageIndex, pageSize);
        $.net.PagingHandler.Paging(pagination, function (data) {
            bindData(data);
        }, function (e) {
            if (e.statusText === "timeout") {
                alert("服务器忙");
            } else {
                alert(e.responseText);
            }
        });
        return false;
    }

    window.onload = function () {
        queryOrders(1, 10);
    };
</script>

纯JS实现代码如下:

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>纯js分页</title>
  6     <link href="../css/style.css" rel="stylesheet" />
  7 </head>
  8 <body>
  9     <div id="content" class="table column">
 10     </div>
 11     <div id="pager"></div>
 12 </body>
 13 </html>
 14 <script>
 15 
 16     /*创建XMLHttpRequest*/
 17     function createXMLHttpRequest() {
 18         var xmlHttp;
 19         try {
 20             xmlHttp = new XMLHttpRequest();
 21         } catch (e) {
 22             try {
 23                 xmlHttp = new ActiveXObject("MSXML2.xmlHttp");
 24             } catch (e) {
 25                 try {
 26                     xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
 27                 } catch (e) {
 28                     alert("你的浏览器不支持xmlHttp对象，请升级到IE6以上版本！");
 29                     xmlHttp = false;
 30                 }
 31             }
 32         }
 33         var me = this;
 34         this.Method = "POST";
 35         this.Url = "";
 36         this.Async = true;
 37         this.Arg = "";
 38         this.ContentType = "application/x-www-form-urlencoded";
 39         this.Accept = "";
 40         this.CallBack = function () { };
 41         this.Loading = function () { };
 42         this.Error = function () { };
 43 
 44         this.Send = function () {
 45             try {
 46                 if (this.Url == "") {
 47                     return false;
 48                 }
 49                 if (!xmlHttp) {
 50                 }
 51                 xmlHttp.open(this.Method, this.Url, this.Async);
 52                 if (this.Method == "POST") {
 53                     xmlHttp.setRequestHeader("Content-Type", me.ContentType);
 54                     if (this.Accept != "") {
 55                         xmlHttp.setRequestHeader("Accept", me.Accept);
 56                     }
 57                 }
 58                 xmlHttp.onreadystatechange = function () {
 59                     if (xmlHttp.readyState == 4) {
 60                         var result = false;
 61                         if (xmlHttp.status == 200) {
 62                             result = xmlHttp.responseText;
 63                         }
 64                         xmlHttp = null;
 65 
 66                         me.CallBack(result);
 67                     }
 68                     else {
 69                         me.Loading();
 70                     }
 71                 }
 72                 if (this.Method == "POST") {
 73                     xmlHttp.send(this.Arg);
 74                 }
 75                 else {
 76                     xmlHttp.send(null);
 77                 }
 78             } catch (ex) {
 79                 me.Error(ex);
 80             }
 81             return false;
 82         }
 83     }
 84 
 85     /*创建发送请求*/
 86     function sendPostRequest(targetUrl, parameters, successCallback, errorCallback) {
 87         var ajax = new createXMLHttpRequest();
 88         ajax.Method = "POST";
 89         ajax.ContentType = "application/json; charset=utf-8;";
 90         ajax.Accept = "application/json, text/javascript, */*; q=0.01";
 91         ajax.Url = targetUrl;
 92         ajax.Async = true;
 93         ajax.Arg = parameters;
 94         ajax.CallBack = successCallback;
 95         ajax.Error = errorCallback;
 96         ajax.Send();
 97     }
 98 
 99     /*渲染分页控件*/
100     function drawPagination(container, pageIndex, pageSize, dataCount) {
101         if (dataCount > 0) {
102             var pageCount = parseInt((dataCount + pageSize - 1) / pageSize);
103             var contents = new Array();
104             contents.push('<div class="dataPager clearfix">');
105             if (pageIndex > 1) {
106                 contents.push('<a id="pager_lbnFirst" value="1" onclick="queryOrders(1)">首页</a>');
107                 contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + ' onclick="queryOrders(' + (pageIndex - 1) + ')">&lt; 上一页</a>');
108             }
109             contents.join('<span id="pPages">');
110             for (var i = pageIndex - 4; i <= pageIndex + 4; i++) {
111                 if (i == pageIndex) {
112                     contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>');
113                 } else if (i > 0 && i <= pageCount) {
114                     contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' onclick="queryOrders(' + (i) + ')" style="margin-left:5px;margin-right:5px;">' + i + '</a>');
115                 }
116             }
117             contents.join('</span>');
118             if (pageIndex < pageCount) {
119                 contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + ' onclick="queryOrders(' + (pageIndex + 1) + ')">下一页 &gt;</a>');
120                 contents.push('<a id="pager_lbnLast" value=' + pageCount + '  onclick="queryOrders(' + pageCount + ')" >末页</a>');
121             }
122             contents.push('共 <span id="pager_lblTotalCount">' + dataCount);
123             contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize);
124             contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>');
125             container.innerHTML = contents.join('');
126             container.style.display = "block";
127         } else {
128             container.innerHTML = "";
129             container.style.display = "none";
130         }
131     }
132 
133     /*构建分页参数*/
134     function getQueryOrdersPagination(pageIndex, pageSize) {
135         return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true };
136     }
137 
138     /*绑定页面数据*/
139     function bindData(data) {
140         var html = new Array();
141         var json = eval("(" + data + ")");
142         var d = json.Data;
143         html.push("<table>");
144         html.push("<tr><th>Id</th><th>名字</th><th>年龄</th><th>地址</th><th>手机</th><th>身高</th><th>体重</th><th>备注</th><th>操作</th></tr>");
145         for (var i = 0; i < d.length; i++) {
146             html.push(" <tr>");
147             html.push("<td>" + d[i].Id + "</td>");
148             html.push("<td>" + d[i].Name + "</td>");
149             html.push("<td>" + d[i].Age + "</td>");
150             html.push("<td>" + d[i].Address + "</td>");
151             html.push("<td>" + d[i].Mobile + "</td>");
152             html.push("<td>" + d[i].Height + "</td>");
153             html.push("<td>" + d[i].Weight + "</td>");
154             html.push("<td>" + d[i].Remark + "</td>");
155             html.push("<td><a href='javascript:operation(${Id});'>操作</a></td>");
156             html.push(" </tr>");
157         }
158         html.push("</table>");
159         document.getElementById("content").innerHTML = html.join("");
160         drawPagination(document.getElementById("pager"), json.Pagination.PageIndex, json.Pagination.PageSize, json.Pagination.RowCount);
161     }
162 
163     /*执行查询*/
164     function queryOrders(pageIndex, pageSize) {
165         if (!pageIndex) pageIndex = 1;
166         pageSize = pageSize || 10;
167         var pagination = getQueryOrdersPagination(pageIndex, pageSize);
168         var parameters = JSON.stringify({ "pagination": pagination });
169         sendPostRequest("/ajax/PagingHandler.ashx/Paging", parameters, function (data) {
170             bindData(data);
171         }, function (e) {
172             if (e.statusText == "timeout") {
173                 alert("服务器忙");
174             } else {
175                 alert(e.responseText);
176             }
177         });
178         return false;
179     }
180 
181     /*初始化*/
182     window.onload = function () {
183         queryOrders(1, 10);
184     };
185 </script>

jquery实现代码如下

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>jquery ajax 分页</title>
  6     <link href="../css/style.css" rel="stylesheet" />
  7     <script src="../js/jquery-1.7.2.min.js"></script>
  8     <script src="../js/jquerytemplate.js"></script>
  9     <!--jquery template-->
 10     <script type="text/x-jquery-tmpl" id="temp">
 11         <tr>
 12             <td>${Id}</td>
 13             <td>${Name}</td>
 14             <td>${Age}</td>
 15             <td>${Address}</td>
 16             <td>${Mobile}</td>
 17             <td>${Height}</td>
 18             <td>${Weight}</td>
 19             <td>${Remark}</td>
 20             <td>
 21                 <a href='javascript:operation(${Id});'>操作</a>
 22             </td>
 23     </tr>
 24 </script>
 25 </head>
 26 <body>
 27     <div id="content" class="table column">
 28         <table>
 29             <thead>
 30                 <tr>
 31                     <th>Id</th>
 32                     <th>名字</th>
 33                     <th>年龄</th>
 34                     <th>地址</th>
 35                     <th>手机</th>
 36                     <th>身高</th>
 37                     <th>体重</th>
 38                     <th>备注</th>
 39                     <th>操作</th>
 40                 </tr>
 41             </thead>
 42             <tbody></tbody>
 43         </table>
 44     </div>
 45     <div id="pager"></div>
 46 </body>
 47 </html>
 48 <script>
 49     function sendPostRequest(targetUrl, parameters, successCallback, errorCallback) {
 50         $.ajax({
 51             type: "POST",
 52             url: targetUrl,
 53             data: parameters,
 54             contentType: "application/json; charset=utf-8",
 55             dataType: "json",
 56             async: true,
 57             success: successCallback,
 58             timeout: 30000,
 59             error: function (e) {
 60                 if (e.responseText == "") return;
 61                 if (e.status == 300) {
 62                     if (JSON.parse(e.responseText) == "RequireLogon") {
 63                         return;
 64                     } else if (JSON.parse(e.responseText) == "Unauthorized") {
 65                         return;
 66                     }
 67                 } else if (e.status == 401 && e.statusText == "Unauthorized") {
 68                     return;
 69                 }
 70                 if (e.statusText == "timeout") {
 71                     alert("服务器忙");
 72                     errorCallback && errorCallback(e);
 73                 } else if (e) {
 74                     errorCallback && errorCallback(e);
 75                 }
 76             }
 77         });
 78     }
 79     /*
 80    jauery js分页函数
 81    container：分页容器jquery对象
 82    pageIndex：当前页码
 83    pageSize：页大小
 84    dataCount：总页数
 85    pageChangedCallback：页面单击回调函数
 86    */
 87     function drawPagination(container, pageIndex, pageSize, dataCount, pageChangedCallback) {
 88         if (dataCount > 0) {
 89             var pageCount = parseInt((dataCount + pageSize - 1) / pageSize);
 90             var contents = new Array();
 91             contents.push('<div class="dataPager clearfix">');
 92             if (pageIndex > 1) {
 93                 contents.push('<a id="pager_lbnFirst" value=1>首页</a>');
 94                 contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + '>&lt; 上一页</a>');
 95             }
 96             contents.join('<span id="pPages">');
 97             for (var i = pageIndex - 4; i <= pageIndex + 4; i++) {
 98                 if (i == pageIndex) {
 99                     contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>');
100                 } else if (i > 0 && i <= pageCount) {
101                     contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' style="margin-left:5px;margin-right:5px;">' + i + '</a>');
102                 }
103             }
104             contents.join('</span>');
105             if (pageIndex < pageCount) {
106                 contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + '>下一页 &gt;</a>');
107                 contents.push('<a id="pager_lbnLast" value=' + pageCount + '>末页</a>');
108             }
109             contents.push('共 <span id="pager_lblTotalCount">' + dataCount);
110             contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize);
111             contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>');
112             container.html(contents.join(''));
113             if (pageChangedCallback) {
114                 $("a", container).click(function () {
115                     var self = $(this);
116                     if (!self.attr("disabled")) {
117                         pageChangedCallback(self.attr("value"));
118                     }
119                 });
120             }
121             container.show();
122         } else {
123             container.html('');
124             container.hide();
125         }
126     }
127 
128     function getQueryOrdersPagination(pageIndex, pageSize) {
129         return { "PageSize": pageSize, "PageIndex": pageIndex, "GetRowCount": true };
130     }
131 
132     function bindData(data) {
133         $("#content table tbody").html($("#temp").tmpl(data.Data));
134         drawPagination($("#pager"), data.Pagination.PageIndex, data.Pagination.PageSize, data.Pagination.RowCount, queryOrders);
135     }
136 
137     function queryOrders(pageIndex, pageSize) {
138         if (!pageIndex) pageIndex = 1;
139         pageSize = pageSize || 10;
140         var pagination = getQueryOrdersPagination(pageIndex, pageSize);
141         var parameters = JSON.stringify({ "pagination": pagination });
142         sendPostRequest("/ajax/PagingHandler.ashx/Paging", parameters, function (data) {
143             bindData(data);
144         }, function (e) {
145             if (e.statusText == "timeout") {
146                 alert("服务器忙");
147             } else {
148                 alert(e.responseText);
149             }
150         });
151         return false;
152     }
153 
154     window.onload = function () {
155         queryOrders(1, 10);
156     };
157 </script>

下载地址 github :https://github.com/842549829/AjaxPaging

posted @ 2015-04-10 13:51 刘小吉阅读(501) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

刘小吉

.NET

Asp.net Ajax(ashx)

公告