自定义的分页插件

闲来无事,写了个分页的JQ插件:

page.js 这个文件是主文件

 1 /**
 2 * Created by layen.xu on 2015/4/11.
 3 */
 4 document.write("<script type='text/javascript' src='page.Ajax.js'></script> <script type='text/javascript' src='page.Event.js'></script> <script type='text/javascript' src='page.Dom.js'></script>");
 5 var PageModules = (function (Page, $) {
 6     $.fn.BindGrid = function (options) {
 7         var ele = this[0];
 8         var defaults = {
 9             index: 1, //当前第1页
10             pageSize: 20, //每页显示数量
11             ele: ele, //当前绑定对象
12             pageSizeList: [2], //下拉框默认的选项
13             url: "", //异步提交的地址
14             jsonData: null, //json数据
15             total: 0, //数据总行数
16             columns: [], //自定义列名
17             currentPageSize: 0//当前是否已经改变下拉框
18         };
19         var opts = $.extend(defaults, options); //合并参数
20         return Page.main = function () {
21             Page.doData(opts);
22         } ();
23     };
24     Page.doData = function (opts) {
25         var data = Page.ajaxData(opts); //ajax提交后台 得到数据
26     }
27     return Page;
28 } (PageModules || {}, jQuery));

 

page.ajax.js 这个文件是用来处理ajax请求分页的数据如:http://doajax/pageChange.ashx?pagaSize=10&pageIndex=1&_=1428801031348

 1 /**
 2 * Created by layen.xu on 2015/4/11.
 3 */
 4 var PageModules = (function (Page, $) {
 5     Page.ajaxData = function (options) {
 6         var defaults = {
 7 
 8         };
 9         var opts = $.extend(defaults, options);
10         var pageSize = opts.currentPageSize == 0 ? opts.pageSizeList[0] : opts.currentPageSize;
11         $.ajax({
12             type: "GET",
13             url: opts.url,
14             data: { pagaSize: pageSize, pageIndex: opts.index },
15             dataType: "json",
16             //async: false,
17             cache: false,
18             success: function (data) {
19                 opts.jsonData = data.data;
20                 opts.total = data.total;
21                 Page.ProcessingDom(opts); //把数据 转换为dom
22             },
23             error: function (e) {
24                 console.error(e.responseText);
25             }
26         });
27     }
28     return Page;
29 } (PageModules || {}, jQuery));

 

page.Dom.js 这个文件是用来处理Dom元素,根据ajax过来的数据动态生成table

  1 /**
  2 * Created by Administrator on 2015/4/11.
  3 */
  4 var PageModules = (function (Page, $) {
  5     Page.ProcessingDom = function (options) {
  6         var defaults = {
  7             jsonData: null,
  8             columnName: '',
  9             columnCount: 0
 10         };
 11         var opts = $.extend(defaults, options);
 12 
 13         if (opts.jsonData) {
 14             opts.ele.innerHTML = "";
 15             //创建一个表格 作为$(opts.ele)的子节点
 16             var table = document.createElement("table");
 17             opts.ele.appendChild(table);
 18             //获取列名、列长
 19             opts.jsonData.forEach(function (v, i, d) {
 20                 opts.columnName = Object.keys(d[i]).toString().split(','); //动态获取列名
 21                 opts.columnCount = opts.columnName.length;
 22             });
 23             var tr = document.createElement("tr");
 24             table.appendChild(tr);
 25             ///创建列头
 26             for (var c = 0; c < opts.columnCount; c++) {
 27                 var column = document.createElement("th");
 28                 ///改写自定义列头
 29                 if (opts.columns.length > 0) {
 30                     opts.columns.forEach(function (v, i, d) {
 31                         if (opts.columnName[c] == v["key"]) {
 32                             column.innerText = v["column"];
 33                         }
 34                     });
 35 
 36                 } else {
 37                     column.innerText = opts.columnName[c];
 38                 }
 39                 tr.appendChild(column);
 40             }
 41 
 42             opts.jsonData.forEach(function (v, i, d) {
 43                 //创建N行tr
 44                 var row = document.createElement("tr");
 45                 table.appendChild(row);
 46 
 47                 //创建n列td
 48                 for (var c = 0; c < opts.columnName.length; c++) {
 49                     var column = document.createElement("td");
 50                     column.innerText = v[opts.columnName[c]];
 51                     row.appendChild(column);
 52                 }
 53             });
 54             //创建元素操作元素
 55             //最后创建一个tr
 56             var actionTr = document.createElement("tr");
 57             table.appendChild(actionTr);
 58             //最后创建一个td
 59             var actionTd = document.createElement("td");
 60             actionTd.colSpan = opts.columnCount;
 61             actionTd.classList.add("action");
 62             actionTr.appendChild(actionTd);
 63             //创建一个span
 64             var actionSpan = document.createElement("span");
 65             actionTd.appendChild(actionSpan);
 66             //span下创建3个a标签
 67             var pre = document.createElement("a");
 68             pre.href = "#";
 69             pre.innerText = "上一页";
 70             pre.id = "pre";
 71             pre.onclick = function (e) {
 72                 Page.preClick(e, opts);
 73             };
 74 
 75             var tip = document.createElement("a");
 76             tip.innerText = opts.index + "/" + opts.total;
 77             var next = document.createElement("a");
 78             next.href = "#";
 79             next.id = "next";
 80             next.innerText = "下一页";
 81             next.onclick = function (e) {
 82                 Page.nextClick(e, opts);
 83             };
 84 
 85             actionSpan.appendChild(pre);
 86             actionSpan.appendChild(tip);
 87             actionSpan.appendChild(next);
 88 
 89             //创建一个span
 90             var actionSpan2 = document.createElement("span");
 91             actionTd.appendChild(actionSpan2);
 92             //span下的文本
 93             var actionSpanText = document.createTextNode("每页显示的数量:");
 94             actionSpan2.appendChild(actionSpanText);
 95             //span下再创建一个select 绑定n个option
 96             var select = document.createElement("select");
 97             select.onchange = function (e) {
 98                 Page.selectChange(e, opts);
 99             };
100             select.id = "selectList";
101             actionSpan2.appendChild(select);
102             for (var i in opts.pageSizeList) {
103                 var option = document.createElement("option");
104                 if (opts.currentPageSize != 0 && opts.currentPageSize == opts.pageSizeList[i]) {
105                     option.selected = "selected";
106                 }
107                 option.innerText = option.value = opts.pageSizeList[i];
108                 select.appendChild(option);
109             }
110         }
111     };
112     return Page;
113 } (PageModules || {}, jQuery));

 

page.Event.js 处理事件:上一页、下一页、每页显示的数量

 1 /**
 2  * Created by layen.xu on 2015/4/11.
 3  */
 4 var PageModules = (function (Page, $) {
 5     var eventObj = function (options) {
 6         var defaults = {};
 7         var opts = $.extend(defaults, options);
 8         return opts;
 9     }
10     Page.preClick = function (e, options) {
11         var opts = eventObj(options);
12         --opts.index;
13         if (opts.index < 1) { opts.index = 1; }
14         Page.doData(opts);
15     };
16     Page.nextClick = function (e, options) {
17         var opts = eventObj(options);
18         ++opts.index;
19         if (opts.index >= opts.total) {
20             opts.index = opts.total;
21         }
22         Page.doData(opts);
23     };
24     Page.selectChange = function (e, options) {
25         var opts = eventObj(options);
26         opts.pageSizeList;
27         var currentSelect = $("#selectList").val();
28         opts.currentPageSize = currentSelect;
29         opts.index = 1;
30         Page.doData(opts);
31     };
32     return Page;
33 } (PageModules || {}, jQuery));

 

html代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>分页</title>
 6     <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
 7     <script type="text/javascript" src="page.js"></script>
 8     <style type="text/css">
 9         body
10         {
11             font-family: 微软雅黑;
12             font-size: 14px;
13         }
14         table
15         {
16             width: 100%;
17             border: 1px solid #ccc;
18             border-collapse: collapse;
19         }
20         tr td
21         {
22             text-align: left;
23             border: 1px solid #ccc;
24         }
25         tr:nth-child(2n)
26         {
27             background: #F2F1D7;
28         }
29         tr:hover
30         {
31             background: #FBFBEA;
32             color: #66CCCC;
33         }
34         td.action
35         {
36             text-align: center;
37         }
38     </style>
39 </head>
40 <body>
41     <div id="grid">
42     </div>
43     <script type="text/javascript">
44         $(function () {
45             $("#grid").BindGrid({ url: 'pageChange.ashx', pageSizeList: [10, 20, 30], columns: [
46                 {
47                     key: "age",
48                     column: "年龄"
49                 },{
50                     key: "name",
51                     column: "名字"
52                 }, {
53                     key: "love",
54                     column: "是否还会爱"
55                 }, {
56                     key: "stu",
57                     column: "是不是学生"
58                 }]
59             });
60         });
61     </script>
62 </body>
63 </html>

 

后台代码:后台是什么语言不重要,只要能返回json数据就好了,我定义的格式是:{"total":100,"data":[{},{},{}]}

total:代表总页数,data:代表当前页的数据。

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Web;
  5 using System.Text;
  6 
  7 namespace MyMobile
  8 {
  9     /// <summary>
 10     /// page 的摘要说明
 11     /// </summary>
 12     public class pageChange : IHttpHandler
 13     {
 14 
 15         public void ProcessRequest(HttpContext context)
 16         {
 17             context.Response.ContentType = "text/json";
 18             //pagaSize:pageSize,pageIndex:opts.index
 19             ///页面显示数量 4
 20             int pageSize = int.Parse(context.Request["pagaSize"]);
 21             //当前第几页 1
 22             int index = int.Parse(context.Request["pageIndex"]);
 23             List<Data> list = new List<Data>()
 24             {
 25                 new Data(){name="张三",age="12",love="1",stu="aa"},
 26                 new Data(){name="李四",age="13",love="1",stu="aa"},
 27                 new Data(){name="王五",age="14",love="1",stu="aa"},
 28                 new Data(){name="赵六",age="15",love="1",stu="aa"},
 29                 new Data(){name="彭总",age="15",love="1",stu="aa"},
 30                 new Data(){name="大泪",age="16",love="1",stu="aa"},
 31                 new Data(){name="小磊",age="17",love="1",stu="aa"},
 32                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
 33                 new Data(){name="维维",age="19",love="1",stu="aa"},
 34                 new Data(){name="张三",age="12",love="1",stu="aa"},
 35                 new Data(){name="李四",age="13",love="1",stu="aa"},
 36                 new Data(){name="王五",age="14",love="1",stu="aa"},
 37                 new Data(){name="赵六",age="15",love="1",stu="aa"},
 38                 new Data(){name="彭总",age="15",love="1",stu="aa"},
 39                 new Data(){name="大泪",age="16",love="1",stu="aa"},
 40                 new Data(){name="小磊",age="17",love="1",stu="aa"},
 41                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
 42                 new Data(){name="维维",age="19",love="1",stu="aa"},
 43                 new Data(){name="张三",age="12",love="1",stu="aa"},
 44                 new Data(){name="李四",age="13",love="1",stu="aa"},
 45                 new Data(){name="王五",age="14",love="1",stu="aa"},
 46                 new Data(){name="赵六",age="15",love="1",stu="aa"},
 47                 new Data(){name="彭总",age="15",love="1",stu="aa"},
 48                 new Data(){name="大泪",age="16",love="1",stu="aa"},
 49                 new Data(){name="小磊",age="17",love="1",stu="aa"},
 50                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
 51                 new Data(){name="维维",age="19",love="1",stu="aa"},
 52                 new Data(){name="张三",age="12",love="1",stu="aa"},
 53                 new Data(){name="李四",age="13",love="1",stu="aa"},
 54                 new Data(){name="王五",age="14",love="1",stu="aa"},
 55                 new Data(){name="赵六",age="15",love="1",stu="aa"},
 56                 new Data(){name="彭总",age="15",love="1",stu="aa"},
 57                 new Data(){name="大泪",age="16",love="1",stu="aa"},
 58                 new Data(){name="小磊",age="17",love="1",stu="aa"},
 59                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
 60                 new Data(){name="维维",age="19",love="1",stu="aa"},
 61                 new Data(){name="张三",age="12",love="1",stu="aa"},
 62                 new Data(){name="李四",age="13",love="1",stu="aa"},
 63                 new Data(){name="王五",age="14",love="1",stu="aa"},
 64                 new Data(){name="赵六",age="15",love="1",stu="aa"},
 65                 new Data(){name="彭总",age="15",love="1",stu="aa"},
 66                 new Data(){name="大泪",age="16",love="1",stu="aa"},
 67                 new Data(){name="小磊",age="17",love="1",stu="aa"},
 68                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
 69                 new Data(){name="维维",age="19",love="1",stu="aa"},
 70                 new Data(){name="张三",age="12",love="1",stu="aa"},
 71                 new Data(){name="李四",age="13",love="1",stu="aa"},
 72                 new Data(){name="王五",age="14",love="1",stu="aa"},
 73                 new Data(){name="赵六",age="15",love="1",stu="aa"},
 74                 new Data(){name="彭总",age="15",love="1",stu="aa"},
 75                 new Data(){name="大泪",age="16",love="1",stu="aa"},
 76                 new Data(){name="小磊",age="17",love="1",stu="aa"},
 77                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
 78                 new Data(){name="维维",age="19",love="1",stu="aa"},
 79                 new Data(){name="张三",age="12",love="1",stu="aa"},
 80                 new Data(){name="李四",age="13",love="1",stu="aa"},
 81                 new Data(){name="王五",age="14",love="1",stu="aa"},
 82                 new Data(){name="赵六",age="15",love="1",stu="aa"},
 83                 new Data(){name="彭总",age="15",love="1",stu="aa"},
 84                 new Data(){name="大泪",age="16",love="1",stu="aa"},
 85                 new Data(){name="小磊",age="17",love="1",stu="aa"},
 86                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
 87                 new Data(){name="维维",age="19",love="1",stu="aa"},
 88                 new Data(){name="张三",age="12",love="1",stu="aa"},
 89                 new Data(){name="李四",age="13",love="1",stu="aa"},
 90                 new Data(){name="王五",age="14",love="1",stu="aa"},
 91                 new Data(){name="赵六",age="15",love="1",stu="aa"},
 92                 new Data(){name="彭总",age="15",love="1",stu="aa"},
 93                 new Data(){name="大泪",age="16",love="1",stu="aa"},
 94                 new Data(){name="小磊",age="17",love="1",stu="aa"},
 95                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
 96                 new Data(){name="维维",age="19",love="1",stu="aa"},
 97                 new Data(){name="张三",age="12",love="1",stu="aa"},
 98                 new Data(){name="李四",age="13",love="1",stu="aa"},
 99                 new Data(){name="王五",age="14",love="1",stu="aa"},
100                 new Data(){name="赵六",age="15",love="1",stu="aa"},
101                 new Data(){name="彭总",age="15",love="1",stu="aa"},
102                 new Data(){name="大泪",age="16",love="1",stu="aa"},
103                 new Data(){name="小磊",age="17",love="1",stu="aa"},
104                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
105                 new Data(){name="维维",age="19",love="1",stu="aa"},
106                 new Data(){name="张三",age="12",love="1",stu="aa"},
107                 new Data(){name="李四",age="13",love="1",stu="aa"},
108                 new Data(){name="王五",age="14",love="1",stu="aa"},
109                 new Data(){name="赵六",age="15",love="1",stu="aa"},
110                 new Data(){name="彭总",age="15",love="1",stu="aa"},
111                 new Data(){name="大泪",age="16",love="1",stu="aa"},
112                 new Data(){name="小磊",age="17",love="1",stu="aa"},
113                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
114                 new Data(){name="维维",age="19",love="1",stu="aa"},
115                 new Data(){name="张三",age="12",love="1",stu="aa"},
116                 new Data(){name="李四",age="13",love="1",stu="aa"},
117                 new Data(){name="王五",age="14",love="1",stu="aa"},
118                 new Data(){name="赵六",age="15",love="1",stu="aa"},
119                 new Data(){name="彭总",age="15",love="1",stu="aa"},
120                 new Data(){name="大泪",age="16",love="1",stu="aa"},
121                 new Data(){name="小磊",age="17",love="1",stu="aa"},
122                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
123                 new Data(){name="维维",age="19",love="1",stu="aa"},
124                 new Data(){name="张三",age="12",love="1",stu="aa"},
125                 new Data(){name="李四",age="13",love="1",stu="aa"},
126                 new Data(){name="王五",age="14",love="1",stu="aa"},
127                 new Data(){name="赵六",age="15",love="1",stu="aa"},
128                 new Data(){name="彭总",age="15",love="1",stu="aa"},
129                 new Data(){name="大泪",age="16",love="1",stu="aa"},
130                 new Data(){name="小磊",age="17",love="1",stu="aa"},
131                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
132                 new Data(){name="维维",age="19",love="1",stu="aa"},
133                 new Data(){name="张三",age="12",love="1",stu="aa"},
134                 new Data(){name="李四",age="13",love="1",stu="aa"},
135                 new Data(){name="王五",age="14",love="1",stu="aa"},
136                 new Data(){name="赵六",age="15",love="1",stu="aa"},
137                 new Data(){name="彭总",age="15",love="1",stu="aa"},
138                 new Data(){name="大泪",age="16",love="1",stu="aa"},
139                 new Data(){name="小磊",age="17",love="1",stu="aa"},
140                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
141                 new Data(){name="维维",age="19",love="1",stu="aa"},
142                 new Data(){name="张三",age="12",love="1",stu="aa"},
143                 new Data(){name="李四",age="13",love="1",stu="aa"},
144                 new Data(){name="王五",age="14",love="1",stu="aa"},
145                 new Data(){name="赵六",age="15",love="1",stu="aa"},
146                 new Data(){name="彭总",age="15",love="1",stu="aa"},
147                 new Data(){name="大泪",age="16",love="1",stu="aa"},
148                 new Data(){name="小磊",age="17",love="1",stu="aa"},
149                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
150                 new Data(){name="维维",age="19",love="1",stu="aa"},
151                 new Data(){name="张三",age="12",love="1",stu="aa"},
152                 new Data(){name="李四",age="13",love="1",stu="aa"},
153                 new Data(){name="王五",age="14",love="1",stu="aa"},
154                 new Data(){name="赵六",age="15",love="1",stu="aa"},
155                 new Data(){name="彭总",age="15",love="1",stu="aa"},
156                 new Data(){name="大泪",age="16",love="1",stu="aa"},
157                 new Data(){name="小磊",age="17",love="1",stu="aa"},
158                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
159                 new Data(){name="维维",age="19",love="1",stu="aa"},
160                 new Data(){name="张三",age="12",love="1",stu="aa"},
161                 new Data(){name="李四",age="13",love="1",stu="aa"},
162                 new Data(){name="王五",age="14",love="1",stu="aa"},
163                 new Data(){name="赵六",age="15",love="1",stu="aa"},
164                 new Data(){name="彭总",age="15",love="1",stu="aa"},
165                 new Data(){name="大泪",age="16",love="1",stu="aa"},
166                 new Data(){name="小磊",age="17",love="1",stu="aa"},
167                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
168                 new Data(){name="维维",age="19",love="1",stu="aa"},
169                 new Data(){name="张三",age="12",love="1",stu="aa"},
170                 new Data(){name="李四",age="13",love="1",stu="aa"},
171                 new Data(){name="王五",age="14",love="1",stu="aa"},
172                 new Data(){name="赵六",age="15",love="1",stu="aa"},
173                 new Data(){name="彭总",age="15",love="1",stu="aa"},
174                 new Data(){name="大泪",age="16",love="1",stu="aa"},
175                 new Data(){name="小磊",age="17",love="1",stu="aa"},
176                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
177                 new Data(){name="维维",age="19",love="1",stu="aa"},
178                 new Data(){name="张三",age="12",love="1",stu="aa"},
179                 new Data(){name="李四",age="13",love="1",stu="aa"},
180                 new Data(){name="王五",age="14",love="1",stu="aa"},
181                 new Data(){name="赵六",age="15",love="1",stu="aa"},
182                 new Data(){name="彭总",age="15",love="1",stu="aa"},
183                 new Data(){name="大泪",age="16",love="1",stu="aa"},
184                 new Data(){name="小磊",age="17",love="1",stu="aa"},
185                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
186                 new Data(){name="维维",age="19",love="1",stu="aa"},
187                 new Data(){name="张三",age="12",love="1",stu="aa"},
188                 new Data(){name="李四",age="13",love="1",stu="aa"},
189                 new Data(){name="王五",age="14",love="1",stu="aa"},
190                 new Data(){name="赵六",age="15",love="1",stu="aa"},
191                 new Data(){name="彭总",age="15",love="1",stu="aa"},
192                 new Data(){name="大泪",age="16",love="1",stu="aa"},
193                 new Data(){name="小磊",age="17",love="1",stu="aa"},
194                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
195                 new Data(){name="维维",age="19",love="1",stu="aa"},
196                 new Data(){name="张三",age="12",love="1",stu="aa"},
197                 new Data(){name="李四",age="13",love="1",stu="aa"},
198                 new Data(){name="王五",age="14",love="1",stu="aa"},
199                 new Data(){name="赵六",age="15",love="1",stu="aa"},
200                 new Data(){name="彭总",age="15",love="1",stu="aa"},
201                 new Data(){name="大泪",age="16",love="1",stu="aa"},
202                 new Data(){name="小磊",age="17",love="1",stu="aa"},
203                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
204                 new Data(){name="维维",age="19",love="1",stu="aa"},
205                 new Data(){name="张三",age="12",love="1",stu="aa"},
206                 new Data(){name="李四",age="13",love="1",stu="aa"},
207                 new Data(){name="王五",age="14",love="1",stu="aa"},
208                 new Data(){name="赵六",age="15",love="1",stu="aa"},
209                 new Data(){name="彭总",age="15",love="1",stu="aa"},
210                 new Data(){name="大泪",age="16",love="1",stu="aa"},
211                 new Data(){name="小磊",age="17",love="1",stu="aa"},
212                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
213                 new Data(){name="维维",age="19",love="1",stu="aa"},
214                 new Data(){name="张三",age="12",love="1",stu="aa"},
215                 new Data(){name="李四",age="13",love="1",stu="aa"},
216                 new Data(){name="王五",age="14",love="1",stu="aa"},
217                 new Data(){name="赵六",age="15",love="1",stu="aa"},
218                 new Data(){name="彭总",age="15",love="1",stu="aa"},
219                 new Data(){name="大泪",age="16",love="1",stu="aa"},
220                 new Data(){name="小磊",age="17",love="1",stu="aa"},
221                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
222                 new Data(){name="维维",age="19",love="1",stu="aa"},
223                 new Data(){name="张三",age="12",love="1",stu="aa"},
224                 new Data(){name="李四",age="13",love="1",stu="aa"},
225                 new Data(){name="王五",age="14",love="1",stu="aa"},
226                 new Data(){name="赵六",age="15",love="1",stu="aa"},
227                 new Data(){name="彭总",age="15",love="1",stu="aa"},
228                 new Data(){name="大泪",age="16",love="1",stu="aa"},
229                 new Data(){name="小磊",age="17",love="1",stu="aa"},
230                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
231                 new Data(){name="维维",age="19",love="1",stu="aa"},
232                 new Data(){name="张三",age="12",love="1",stu="aa"},
233                 new Data(){name="李四",age="13",love="1",stu="aa"},
234                 new Data(){name="王五",age="14",love="1",stu="aa"},
235                 new Data(){name="赵六",age="15",love="1",stu="aa"},
236                 new Data(){name="彭总",age="15",love="1",stu="aa"},
237                 new Data(){name="大泪",age="16",love="1",stu="aa"},
238                 new Data(){name="小磊",age="17",love="1",stu="aa"},
239                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
240                 new Data(){name="维维",age="19",love="1",stu="aa"},
241                 new Data(){name="张三",age="12",love="1",stu="aa"},
242                 new Data(){name="李四",age="13",love="1",stu="aa"},
243                 new Data(){name="王五",age="14",love="1",stu="aa"},
244                 new Data(){name="赵六",age="15",love="1",stu="aa"},
245                 new Data(){name="彭总",age="15",love="1",stu="aa"},
246                 new Data(){name="大泪",age="16",love="1",stu="aa"},
247                 new Data(){name="小磊",age="17",love="1",stu="aa"},
248                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
249                 new Data(){name="维维",age="19",love="1",stu="aa"},
250                 new Data(){name="张三",age="12",love="1",stu="aa"},
251                 new Data(){name="李四",age="13",love="1",stu="aa"},
252                 new Data(){name="王五",age="14",love="1",stu="aa"},
253                 new Data(){name="赵六",age="15",love="1",stu="aa"},
254                 new Data(){name="彭总",age="15",love="1",stu="aa"},
255                 new Data(){name="大泪",age="16",love="1",stu="aa"},
256                 new Data(){name="小磊",age="17",love="1",stu="aa"},
257                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
258                 new Data(){name="维维",age="19",love="1",stu="aa"},
259                 new Data(){name="张三",age="12",love="1",stu="aa"},
260                 new Data(){name="李四",age="13",love="1",stu="aa"},
261                 new Data(){name="王五",age="14",love="1",stu="aa"},
262                 new Data(){name="赵六",age="15",love="1",stu="aa"},
263                 new Data(){name="彭总",age="15",love="1",stu="aa"},
264                 new Data(){name="大泪",age="16",love="1",stu="aa"},
265                 new Data(){name="小磊",age="17",love="1",stu="aa"},
266                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
267                 new Data(){name="维维",age="19",love="1",stu="aa"},
268                 new Data(){name="张三",age="12",love="1",stu="aa"},
269                 new Data(){name="李四",age="13",love="1",stu="aa"},
270                 new Data(){name="王五",age="14",love="1",stu="aa"},
271                 new Data(){name="赵六",age="15",love="1",stu="aa"},
272                 new Data(){name="彭总",age="15",love="1",stu="aa"},
273                 new Data(){name="大泪",age="16",love="1",stu="aa"},
274                 new Data(){name="小磊",age="17",love="1",stu="aa"},
275                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
276                 new Data(){name="维维",age="19",love="1",stu="aa"},
277                 new Data(){name="张三",age="12",love="1",stu="aa"},
278                 new Data(){name="李四",age="13",love="1",stu="aa"},
279                 new Data(){name="王五",age="14",love="1",stu="aa"},
280                 new Data(){name="赵六",age="15",love="1",stu="aa"},
281                 new Data(){name="彭总",age="15",love="1",stu="aa"},
282                 new Data(){name="大泪",age="16",love="1",stu="aa"},
283                 new Data(){name="小磊",age="17",love="1",stu="aa"},
284                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
285                 new Data(){name="维维",age="19",love="1",stu="aa"},
286                 new Data(){name="张三",age="12",love="1",stu="aa"},
287                 new Data(){name="李四",age="13",love="1",stu="aa"},
288                 new Data(){name="王五",age="14",love="1",stu="aa"},
289                 new Data(){name="赵六",age="15",love="1",stu="aa"},
290                 new Data(){name="彭总",age="15",love="1",stu="aa"},
291                 new Data(){name="大泪",age="16",love="1",stu="aa"},
292                 new Data(){name="小磊",age="17",love="1",stu="aa"},
293                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
294                 new Data(){name="维维",age="19",love="1",stu="aa"},
295                 new Data(){name="张三",age="12",love="1",stu="aa"},
296                 new Data(){name="李四",age="13",love="1",stu="aa"},
297                 new Data(){name="王五",age="14",love="1",stu="aa"},
298                 new Data(){name="赵六",age="15",love="1",stu="aa"},
299                 new Data(){name="彭总",age="15",love="1",stu="aa"},
300                 new Data(){name="大泪",age="16",love="1",stu="aa"},
301                 new Data(){name="小磊",age="17",love="1",stu="aa"},
302                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
303                 new Data(){name="维维",age="19",love="1",stu="aa"},
304                 new Data(){name="张三",age="12",love="1",stu="aa"},
305                 new Data(){name="李四",age="13",love="1",stu="aa"},
306                 new Data(){name="王五",age="14",love="1",stu="aa"},
307                 new Data(){name="赵六",age="15",love="1",stu="aa"},
308                 new Data(){name="彭总",age="15",love="1",stu="aa"},
309                 new Data(){name="大泪",age="16",love="1",stu="aa"},
310                 new Data(){name="小磊",age="17",love="1",stu="aa"},
311                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
312                 new Data(){name="维维",age="19",love="1",stu="aa"},
313                 new Data(){name="张三",age="12",love="1",stu="aa"},
314                 new Data(){name="李四",age="13",love="1",stu="aa"},
315                 new Data(){name="王五",age="14",love="1",stu="aa"},
316                 new Data(){name="赵六",age="15",love="1",stu="aa"},
317                 new Data(){name="彭总",age="15",love="1",stu="aa"},
318                 new Data(){name="大泪",age="16",love="1",stu="aa"},
319                 new Data(){name="小磊",age="17",love="1",stu="aa"},
320                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
321                 new Data(){name="维维",age="19",love="1",stu="aa"},
322                 new Data(){name="张三",age="12",love="1",stu="aa"},
323                 new Data(){name="李四",age="13",love="1",stu="aa"},
324                 new Data(){name="王五",age="14",love="1",stu="aa"},
325                 new Data(){name="赵六",age="15",love="1",stu="aa"},
326                 new Data(){name="彭总",age="15",love="1",stu="aa"},
327                 new Data(){name="大泪",age="16",love="1",stu="aa"},
328                 new Data(){name="小磊",age="17",love="1",stu="aa"},
329                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
330                 new Data(){name="维维",age="19",love="1",stu="aa"},
331                 new Data(){name="张三",age="12",love="1",stu="aa"},
332                 new Data(){name="李四",age="13",love="1",stu="aa"},
333                 new Data(){name="王五",age="14",love="1",stu="aa"},
334                 new Data(){name="赵六",age="15",love="1",stu="aa"},
335                 new Data(){name="彭总",age="15",love="1",stu="aa"},
336                 new Data(){name="大泪",age="16",love="1",stu="aa"},
337                 new Data(){name="小磊",age="17",love="1",stu="aa"},
338                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
339                 new Data(){name="维维",age="19",love="1",stu="aa"},
340                 new Data(){name="张三",age="12",love="1",stu="aa"},
341                 new Data(){name="李四",age="13",love="1",stu="aa"},
342                 new Data(){name="王五",age="14",love="1",stu="aa"},
343                 new Data(){name="赵六",age="15",love="1",stu="aa"},
344                 new Data(){name="彭总",age="15",love="1",stu="aa"},
345                 new Data(){name="大泪",age="16",love="1",stu="aa"},
346                 new Data(){name="小磊",age="17",love="1",stu="aa"},
347                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
348                 new Data(){name="维维",age="19",love="1",stu="aa"},
349                 new Data(){name="张三",age="12",love="1",stu="aa"},
350                 new Data(){name="李四",age="13",love="1",stu="aa"},
351                 new Data(){name="王五",age="14",love="1",stu="aa"},
352                 new Data(){name="赵六",age="15",love="1",stu="aa"},
353                 new Data(){name="彭总",age="15",love="1",stu="aa"},
354                 new Data(){name="大泪",age="16",love="1",stu="aa"},
355                 new Data(){name="小磊",age="17",love="1",stu="aa"},
356                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
357                 new Data(){name="维维",age="19",love="1",stu="aa"},
358                 new Data(){name="张三",age="12",love="1",stu="aa"},
359                 new Data(){name="李四",age="13",love="1",stu="aa"},
360                 new Data(){name="王五",age="14",love="1",stu="aa"},
361                 new Data(){name="赵六",age="15",love="1",stu="aa"},
362                 new Data(){name="彭总",age="15",love="1",stu="aa"},
363                 new Data(){name="大泪",age="16",love="1",stu="aa"},
364                 new Data(){name="小磊",age="17",love="1",stu="aa"},
365                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
366                 new Data(){name="维维",age="19",love="1",stu="aa"},
367                 new Data(){name="张三",age="12",love="1",stu="aa"},
368                 new Data(){name="李四",age="13",love="1",stu="aa"},
369                 new Data(){name="王五",age="14",love="1",stu="aa"},
370                 new Data(){name="赵六",age="15",love="1",stu="aa"},
371                 new Data(){name="彭总",age="15",love="1",stu="aa"},
372                 new Data(){name="大泪",age="16",love="1",stu="aa"},
373                 new Data(){name="小磊",age="17",love="1",stu="aa"},
374                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
375                 new Data(){name="维维",age="19",love="1",stu="aa"},
376                 new Data(){name="张三",age="12",love="1",stu="aa"},
377                 new Data(){name="李四",age="13",love="1",stu="aa"},
378                 new Data(){name="王五",age="14",love="1",stu="aa"},
379                 new Data(){name="赵六",age="15",love="1",stu="aa"},
380                 new Data(){name="彭总",age="15",love="1",stu="aa"},
381                 new Data(){name="大泪",age="16",love="1",stu="aa"},
382                 new Data(){name="小磊",age="17",love="1",stu="aa"},
383                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
384                 new Data(){name="维维",age="19",love="1",stu="aa"},
385                 new Data(){name="张三",age="12",love="1",stu="aa"},
386                 new Data(){name="李四",age="13",love="1",stu="aa"},
387                 new Data(){name="王五",age="14",love="1",stu="aa"},
388                 new Data(){name="赵六",age="15",love="1",stu="aa"},
389                 new Data(){name="彭总",age="15",love="1",stu="aa"},
390                 new Data(){name="大泪",age="16",love="1",stu="aa"},
391                 new Data(){name="小磊",age="17",love="1",stu="aa"},
392                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
393                 new Data(){name="维维",age="19",love="1",stu="aa"},
394                 new Data(){name="张三",age="12",love="1",stu="aa"},
395                 new Data(){name="李四",age="13",love="1",stu="aa"},
396                 new Data(){name="王五",age="14",love="1",stu="aa"},
397                 new Data(){name="赵六",age="15",love="1",stu="aa"},
398                 new Data(){name="彭总",age="15",love="1",stu="aa"},
399                 new Data(){name="大泪",age="16",love="1",stu="aa"},
400                 new Data(){name="小磊",age="17",love="1",stu="aa"},
401                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
402                 new Data(){name="维维",age="19",love="1",stu="aa"},
403                 new Data(){name="张三",age="12",love="1",stu="aa"},
404                 new Data(){name="李四",age="13",love="1",stu="aa"},
405                 new Data(){name="王五",age="14",love="1",stu="aa"},
406                 new Data(){name="赵六",age="15",love="1",stu="aa"},
407                 new Data(){name="彭总",age="15",love="1",stu="aa"},
408                 new Data(){name="大泪",age="16",love="1",stu="aa"},
409                 new Data(){name="小磊",age="17",love="1",stu="aa"},
410                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
411                 new Data(){name="维维",age="19",love="1",stu="aa"},
412                 new Data(){name="张三",age="12",love="1",stu="aa"},
413                 new Data(){name="李四",age="13",love="1",stu="aa"},
414                 new Data(){name="王五",age="14",love="1",stu="aa"},
415                 new Data(){name="赵六",age="15",love="1",stu="aa"},
416                 new Data(){name="彭总",age="15",love="1",stu="aa"},
417                 new Data(){name="大泪",age="16",love="1",stu="aa"},
418                 new Data(){name="小磊",age="17",love="1",stu="aa"},
419                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
420                 new Data(){name="维维",age="19",love="1",stu="aa"},
421                 new Data(){name="张三",age="12",love="1",stu="aa"},
422                 new Data(){name="李四",age="13",love="1",stu="aa"},
423                 new Data(){name="王五",age="14",love="1",stu="aa"},
424                 new Data(){name="赵六",age="15",love="1",stu="aa"},
425                 new Data(){name="彭总",age="15",love="1",stu="aa"},
426                 new Data(){name="大泪",age="16",love="1",stu="aa"},
427                 new Data(){name="小磊",age="17",love="1",stu="aa"},
428                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
429                 new Data(){name="维维",age="19",love="1",stu="aa"},
430                 new Data(){name="张三",age="12",love="1",stu="aa"},
431                 new Data(){name="李四",age="13",love="1",stu="aa"},
432                 new Data(){name="王五",age="14",love="1",stu="aa"},
433                 new Data(){name="赵六",age="15",love="1",stu="aa"},
434                 new Data(){name="彭总",age="15",love="1",stu="aa"},
435                 new Data(){name="大泪",age="16",love="1",stu="aa"},
436                 new Data(){name="小磊",age="17",love="1",stu="aa"},
437                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
438                 new Data(){name="维维",age="19",love="1",stu="aa"},
439                 new Data(){name="张三",age="12",love="1",stu="aa"},
440                 new Data(){name="李四",age="13",love="1",stu="aa"},
441                 new Data(){name="王五",age="14",love="1",stu="aa"},
442                 new Data(){name="赵六",age="15",love="1",stu="aa"},
443                 new Data(){name="彭总",age="15",love="1",stu="aa"},
444                 new Data(){name="大泪",age="16",love="1",stu="aa"},
445                 new Data(){name="小磊",age="17",love="1",stu="aa"},
446                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
447                 new Data(){name="维维",age="19",love="1",stu="aa"},
448                 new Data(){name="张三",age="12",love="1",stu="aa"},
449                 new Data(){name="李四",age="13",love="1",stu="aa"},
450                 new Data(){name="王五",age="14",love="1",stu="aa"},
451                 new Data(){name="赵六",age="15",love="1",stu="aa"},
452                 new Data(){name="彭总",age="15",love="1",stu="aa"},
453                 new Data(){name="大泪",age="16",love="1",stu="aa"},
454                 new Data(){name="小磊",age="17",love="1",stu="aa"},
455                 new Data(){name="苍老师",age="18",love="1",stu="aa"},
456                 new Data(){name="维维",age="19",love="1",stu="aa"},
457                 new Data(){name="周存燕",age="20",love="1",stu="aa"}
458             };
459             //计算当前数据开始的下标
460             int s = (index - 1) * pageSize;
461             s = s < 0 ? 0 : s;
462             int sum = ((list.Count - 1) / pageSize) + 1;
463             //计算数据结束的小标
464             int e = s + pageSize > list.Count ? list.Count - 1 : s + pageSize - 1;
465             e = e < 0 ? 1 : e;
466             List<Data> newList = new List<Data>();
467             for (int i = s; i <= e; i++)
468             {
469                 newList.Add(list[i]);
470             }
471 
472             /*
473                 {"total":100,data:[{"name":"张三","age":"12","love":"1","stu":"aa"},{"name":"李四","age":"13","love":"1","stu":"aa"},{"name":"王五","age":"14","love":"1","stu":"aa"},{"name":"赵六","age":"15","love":"1","stu":"aa"},{"name":"彭总","age":"15","love":"1","stu":"aa"},{"name":"大泪","age":"16","love":"1","stu":"aa"},{"name":"小磊","age":"17","love":"1","stu":"aa"},{"name":"苍老师","age":"18","love":"1","stu":"aa"},{"name":"维维","age":"19","love":"1","stu":"aa"},{"name":"张三","age":"12","love":"1","stu":"aa"}]}
474              */
475             StringBuilder sb = new StringBuilder("{\"total\":" + sum + ",\"data\":");
476             string result = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(newList);
477             sb.Append(result);
478             sb.Append("}");
479             context.Response.Write(sb.ToString());
480         }
481 
482         public bool IsReusable
483         {
484             get
485             {
486                 return false;
487             }
488         }
489     }
490 
491     public class Data
492     {
493         public string name;
494         public string age;
495         public string love;
496         public string stu;
497     }
498 }

 

界面效果:

 

 要试运行的话,请在一个一个域下,因为这个写的比较仓促,暂时不支持跨域。当然还有很多可以修改或不足的地方。

有心人会发现,其实这几个文件合并成一个文件。由于比较简单,我就不放源码了。

 

posted @ 2015-04-12 09:26  徐大腿  阅读(730)  评论(0编辑  收藏  举报