jquery DataTables插件显示表格

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" />

		<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" border="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,jquery,Ajax,PHP,css)