我的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"}] }));
});

　　

我让来看看它的结果吧



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