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=)