`
dfwang
  • 浏览: 92911 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery dataTable ajax

    博客分类：
  • j2ee
javascriptdatatableajaxjqueryhtml 
阅读更多
dataTable 插件的相关api:
http://www.datatables.net/api
最近玩dataTable,ajax,一个sample,留个纪念，备用,下面是对dataTable的初始化,返回结果填充的片段,ajax相关回调和httprequest action等省略... 
<!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 "../../media/css/demo_page.css";
			@import "../../media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				var datatables = null;
				var datatables = $('#example').dataTable( {
					  'bPaginate': true,  
					  "bProcessing": true,
				    'bLengthChange': true, 
				    'sPaginationType': 'full_numbers',
					  "sAjaxSource": '../ajax/sources/arrays.txt',
					  "oLanguage": {
				                    "sProcessing": "正在加载数据...",
				                    'sSearch': '数据筛选:',
				                    "sLengthMenu": "每页显示 _MENU_ 项记录",
				                    "sZeroRecords": "没有符合项件的数据...",
				                    "sInfo": "当前数据为从第 _START_ 到第 _END_ 项数据；总共有 _TOTAL_ 项记录",
				                    "sInfoEmpty": "显示 0 至 0 共 0 项",
				                    "sInfoFiltered": "(_MAX_)"
				                }, 
				     "aoColumns":[
				                    null, { "bSortable": false }, { "bSortable": false }, { "bSortable": false }, { "bSortable": false }
				                 ] 
				} );
				
			 
				function updateDataTable() { 
				 
					 
					 datatables.fnClearTable();
						datatables.fnAddData([ ".1","2",".3","4","5"] ); 
						datatables.fnAddData([ ".a","b",".c","d","e"] ); 
				 
				}
		 $("#link").click(function(){
		 			updateDataTable();
		 	});
				
			} );
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			 				
			<h1><a href="#" id="link">Live example</a></h1>
			<div id="dynamic">
				<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
					<thead>
						<tr>
							<th width="20%">Rendering engine</th>
							<th width="25%">Browser</th>
							<th width="25%">Platform(s)</th>
							<th width="15%">Engine version</th>
							<th width="15%">CSS grade</th>
						</tr>
					</thead>
					<tbody>
						
					</tbody>
					<tfoot>
						<tr>
							<th>Rendering engine</th>
							<th>Browser</th>
							<th>Platform(s)</th>
							<th>Engine version</th>
							<th>CSS grade</th>
						</tr>
					</tfoot>
				</table>
			</div>
			<div class="spacer"></div>
			
			
		 
			
			
		
	</body>
</html>
分享到：
| BodyTagSupport 学习
评论
2 楼 mthhk 2015-04-08  
彩笔写上面博客
1 楼 liuweihug 2014-04-11  
推荐这个博客看看。
Jquery DataTable基于Twitter Bootstrap的样式配置和demo下载
http://www.suchso.com/UIweb/jquery-datatable-Twitter-Bootstrap-css-js-demo-down.html
发表评论

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

相关推荐

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