jquery DataTables插件显示表格
该插件可对表格进行排序、查询、分页
并使用jEditable插件可对表格进行编辑，并返回到server端进行保存
官网：http://www.datatables.net/
附件1：从官网下载的文件
附件2：根据官网实例进行的修改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico"
href="http://www.datatables.net/media/images/favicon.ico" target="_blank" rel="external nofollow" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/demo_table_jui.css";
@import "css/jquery-ui-1.8.4.custom.css";
</style>
<script type="text/javascript" language="javascript"
src="js/jquery.js"></script>
<script type="text/javascript" language="javascript"
src="js/jquery.jeditable.js"></script>
<script type="text/javascript" language="javascript"
src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
function getDataSet() {
var aDataSet;
$.ajaxSetup( {
async : false//设置get、post同步
});
$.get("register/RegisterState", {
test : 12
}, function(data, status) {
if (status == "success") {
data = eval("(" + data + ")");
aDataSet = data;
} else {
alert("wrong");
}
});
return aDataSet;
}
$(document).ready(function() {
oTable = $('#example').dataTable( {
"aaData" : getDataSet(),//从服务端获取数据添加到表格内容
"bJQueryUI" : true,//使用DataTables提供的Themes，界面比较美观
"sPaginationType" : "full_numbers"//分页
});
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable('editable_ajax.php', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
"callback" : function(sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
},
"submitdata" : function(value, settings) {
return {
"row_id" : this.parentNode.getAttribute('id'),
"column" : oTable.fnGetPosition(this)[2]
};
},
"height" : "14px"
});
});
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="demo_jui">
<table cellpadding="0" cellspacing="0" class="display"
id="example">
<thead>
<tr>
<th>
User Email
</th>
<th>
Register Way
</th>
<th>
Service Name
</th>
<th>
Domain
</th>
<th>
State
</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
![（javascript学习）复习记录21.iterator2.函数3.变量的作用域4.方法的定义和调用 apply5.Date日期对象6.json7.面向对象编程8.class继承9.操作BOM对象10.操作DOM对象（获取）11.更新节点12.删除节点13.创建和插入DOM节点14.操作表单（验证）15.验证表单16.jQuery17.jquery事件[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)