zoukankan      html  css  js  c++  java
  • 自定义的分页插件

    闲来无事,写了个分页的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 }

    界面效果:

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

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

  • 相关阅读:
    node.js fs,http
    node.js global object,util and so on
    node.js second day
    node.js
    mysql 多个and的简写
    mysql 返回结果按照指定的id顺序返回
    php file_get_contents fopen 连接远程文件
    软考例题1
    Skyline中使用AxTE3DWindowEx打开新的一个球体
    使用AE进行点的坐标投影变换
  • 原文地址:https://www.cnblogs.com/goesby/p/4419045.html
Copyright © 2011-2022 走看看