我的JQuery学习记录，今天学习创建table数据表

很简单哦，一般表格呢，都有分页了，表头了，就做这么一个，请看下图，没有任何格式的哦~

<table >
    <tr>
    <td>姓名</td>
    <td>最后登录时间</td>
    </tr>
    <tr>
    <td>卢定焕 </td>
    <td>2011-08-22 20:59</td>
    </tr>
    <tr>
    <td>卢定焕 </td>
    <td>2011-08-22 20:59</td>
    </tr>
    <tr>
    <td colspan="2">
    <a href="#">上一页</a>
    <a href="#">下一页</a>
    </td>
    </tr>
    </table>

　呵，哎呀，我是学习Jquery的，应该用Jquery的嘛，用Jquery的话呢，必须要有一个js数据哦，这个js数据里要有总行数，当前显示的从第几条开始索引，最多显示多少行呢，

还有哦，分页要有个定义显示的哦，

 var _footText = "第{0}页，第{1}条至{2}条，每页{3}条，共{4}页，共{5}条";

所以呢数据显示要格式化这肯定要的

String.prototype.format=function(vObject)
         {
           var _vparams= arguments;
           if(_vparams.length<1) {
              return this;
          }
           var _str=this;
           var  i=0;
           for(i=0;i<_vparams.length;i++) {
              _str=_str.replace("{"+(i).toString()+"}",_vparams[i]);
           }
           return _str;
         }

　　哎啊，还有那个时间格式化也要哦，先不管别人怎么写先，自己写个，最重要的是自己要会写哦

  function formatDate (vData,vformat) {
             var _format = "Y-M-d H:i:m,u";
             if (vformat) _format = vformat;
             var _rest = "";
             _rest = _format
             .replace("Y", vData.getFullYear().toString())
             .replace("M", (vData.getMonth() + 1).toString())
             .replace("d", vData.getDate().toString())
             .replace("H", vData.getHours().toString())
             .replace("i", vData.getMinutes().toString())
             .replace("u", vData.getMilliseconds().toString())
             .replace("m", vData.getSeconds().toString());
             return _rest;
         }

　　还要将读出来的数据"<",">"使用代号才得哦，不然数据中有也直接输出，那就不得了啦

 function getText(v) {
             var _rest = "";
             _rest = v;
           // debugger;
      //  new Date.prototype.getHours
             switch (typeof (v)) {
                 case "string":
                    _rest=  v.replace("<", " & lt;").replace(">", "& gt;");//因为& gt;跟& lt;直接不能在文里显示所以中间我加空格了，使用中要去掉哦
                    break;
                case "object":
                   
                    if (v.getFullYear) {

                        _rest = formatDate(v, "Y-M-d H:i");
                    }
                    break;
             }
             
             return _rest;
         }

　　好了，下面开始创建html了，

 function getGridHtml(options) {
             var _heardRow = "";
             var _itemRow = "";
              var _dsd=new Array();
             var _columns = options.columns;//表头参数
             var _i = 0;
            
             for (; _i < _columns.length; _i++) {
                 _heardRow = _heardRow + "<td>" + getText(_columns[_i].text) + "</td>";//创建表头
             }
             _heardRow = "<tr>" + _heardRow + "</tr>";
             var data = options.data[options.data.root];//数据
             var _rows = data.data;//数据行
             var _tatol = data[options.data.totalProperty];//总行数据
             var _starIndex = data["starIndex"];//开始索引
             var _pageIndex =Math.floor( _starIndex /options.data.limit)+1;//当前页
             var _tatolPage=0;//总页数
             if(_tatol%options.data.limit==0)
                 _tatolPage=_tatol/options.data.limit;
             else
                 _tatolPage = Math.floor(_tatol / options.data.limit) + 1;
             _i = 0;
             var _j = 0;
             var _temItemRow = "";
            //创建行数据
             for (; _i < _rows.length; _i++) {
                 _temItemRow = "";

                 for (_j=0; _j < _columns.length; _j++) {
                     _temItemRow = _temItemRow + "<td>" + getText(_rows[_i][_columns[_j].dataIndex]) + "</td>";
                 }
                 _temItemRow = "<tr>" + _temItemRow + "</tr>";
                 _itemRow = _itemRow + _temItemRow;
             }
             //创建分页
             var _footText = "第{0}页，第{1}条至{2}条，每页{3}条，共{4}页，共{5}条";
             _footText = _footText.format(_pageIndex, _starIndex, _starIndex + _rows.length - 1, options.data.limit, _tatolPage, _tatol);
             var _footRow = "<td colspan='" + _columns.length + "'>" +
                            "<a href=\"#\">首页</a>"+
                            "<a href=\"#\">上一页</a>"+
                            " <a href=\"#\">下一页</a>"+
                            " <a href=\"#\">最后一页</a> <span> " + _footText + "</span></td>";
               //返回html
             return "<table>" + _heardRow + _itemRow + "<tr>" + _footRow + "</tr></table>"
         }

　最后我就差数据咯，后台取数据我先不学先，那我就自己创建数据吧

  $(document).ready(function(jQuery) {
             //  debugger;
             var datas =
              {
                  start: 0,
                  limit: 25,
                  root: 'data',
                  totalProperty: 'total',
                  data: {
                      total: 3,
                      starIndex: 1,
                      data: [
                        { name: '卢定焕', LastTime: new Date() },
                        { name: '卢定焕', LastTime: new Date() },
                        { name: '卢定焕', LastTime: new Date() }
                        ]
                  }
              };
               $("#tableList").html(getGridHtml({ data: datas, columns: [{ text: "姓名", dataIndex: "name" }, { text: "最后登录时间", dataIndex: "LastTime"}] }));
         });

　　

我让来看看它的结果吧

搞定，今天先这里吧~~做个记录先咯，明天再给每行添加事件，每天只进步一点点就可以了！