`

jquery DataTables插件显示表格

    博客分类：
  • UI
jQueryJavaScriptCSSAjaxPHP 
阅读更多

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>
分享到：
| jquery 中的post和get方法如何同步
评论
4 楼 check-枫叶 2012-12-30  
楼主辛苦    请教下，我要固定标题 ，下面的数据内容可以滚动，这个要怎么设置呢？
3 楼 maidoudao 2012-05-17  
daogugo 写道
楼主写得真详细。 请教下，把第一列不显示， 却要拿到第一列的值，怎么拿

把第一列设置为不可见即可
<tr>
<td style="display:none">
test
</td>
</tr>
2 楼 daogugo 2012-05-10  
楼主写得真详细。 请教下，把第一列不显示， 却要拿到第一列的值，怎么拿
1 楼 dfwang 2011-09-08  
正好遇到类似问题，多谢lz
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics