自定义的分页插件
闲来无事，写了个分页的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 }
界面效果：
要试运行的话，请在一个一个域下，因为这个写的比较仓促，暂时不支持跨域。当然还有很多可以修改或不足的地方。
有心人会发现，其实这几个文件合并成一个文件。由于比较简单，我就不放源码了。
如果觉得对你有所帮助就打点一下吧
