jquery dataTable ajax

最新推荐文章于 2021-08-06 19:41:49 发布

iteye_7504

最新推荐文章于 2021-08-06 19:41:49 发布

阅读量149

点赞数

分类专栏： j2ee 文章标签： javascript datatable ajax jquery html ViewUI

本文链接：https://blog.csdn.net/iteye_7504/article/details/82138658

版权

j2ee 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

dataTable 插件的相关api:
[url]http://www.datatables.net/api[/url]
最近玩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>

iteye_7504

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery dataTable ajax

dataTable 插件的相关api:[url]http://www.datatables.net/api[/url]最近玩dataTable,ajax,一个sample,留个纪念，备用,下面是对dataTable的初始化,返回结果填充的片段,ajax相关回调和httprequest action等省略...[code="java"] Dat...
复制链接

扫一扫