花花的技术 2011-09-08
<!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> No. </th> <th> UserId </th> <th> UserName </th> </tr> </thead> </table> </div> </div> </body> </html>