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

jquery dataTable ajax

    博客分类:
  • j2ee
阅读更多
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>


分享到:
评论
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

相关推荐

    使用jquery DataTable和ajax向页面显示数据列表的方法

    使用jquery DataTable在js中这么写 $(function() { $('#data-table').DataTable( { order : [ [ 1, 'desc' ] ], ajax : { url : /products, type : 'GET', dataSrc : }, ...

    jQuery+datatables插件实现ajax加载数据与增删改查功能示例

    标签中提到了知识点的关键词,包括“jQuery”、“datatables插件”、“ajax”、“加载数据”、“增删改查”。这些关键词代表了本文档所要讲述的主要内容。 从【部分内容】中,我们可以提取以下知识点: - 使用HTML...

    JQuery DataTable中文文档API.chm

    初始化`DataTable`时,可以设置一系列参数来定制其行为,如`columnDefs`用于定义列的样式和行为,`ordering`控制列的排序,`searching`定义是否启用全局搜索,`paging`控制分页功能等。 **3. 表格操作(Table ...

    Jquery dataTable完整例子(取数据、分页、样式等)

    在本文中,我们将深入探讨jQuery DataTable插件,它是一个强大的数据展示工具,广泛用于Web开发中的表格操作。标题“Jquery dataTable完整例子(取数据、分页、样式等)”和描述表明,我们将讨论如何利用这个插件...

    jquery ajax Datatable与json之间数据转换

    jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...

    Jquery DataTable基于Twitter Bootstrap的样式

    Jquery DataTable是一个很不错的表格插件。 1、功能强大,支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源; 4、众多使用者的实例代码

    jquery datatable serverside page 服务器端分页

    **jQuery DataTables 服务器端分页详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转化为交互式数据视图。服务器端分页(Server-side pagination)是其核心特性之一,尤其适用于处理大量...

    Jquery DataTable使用经典案例

    在.Net下使用Jquery DataTable,首先需要确保在项目中引入了jQuery库以及DataTable的JavaScript和CSS资源。可以通过NuGet包管理器安装jQuery,然后从CDN或本地资源路径引入DataTable的库文件,例如: ```html ...

    JQuery DataTable 插件 V2.0

    **jQuery DataTables插件V2.0详解** jQuery DataTables是一款功能强大的JavaScript表格插件,它为HTML表格提供了丰富的交互式功能,如排序、搜索、分页和自定义数据处理等。在V2.0版本中,这个插件进一步提升了性能...

    Structs 2 Action 与 JQuery Datatable 的整合

    3. **Ajax请求设置**:在前端,使用JQuery Datatable的Ajax选项设置,使表格能够通过Ajax请求从服务器获取数据。这通常涉及到`url`参数,指向Struts 2 Action的映射路径。 4. **Datatable初始化**:设置Datatable的...

    jquery datatable 大数据分页面的解决方案

    ### jQuery DataTable大数据分页解决方案详解 #### 一、概述 在处理大数据时,尤其是在Web应用中展示大量数据,如何高效地进行数据分页是一项重要的技术挑战。jQuery DataTable插件因其强大的功能和灵活性,在Web...

    bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

    在本文中,我们将深入探讨如何使用Bootstrap、jQuery和DataTable库实现异步AJAX来刷新表格数据的方法。这个功能常用于动态更新数据展示,无需页面整体刷新,提高用户体验。 首先,让我们了解一下涉及的关键技术和...

    Jquery dataTable完整例子下载(取数据、分页、样式等)

    **jQuery DataTables 全面解析** `jQuery DataTables` 是一个功能强大的JavaScript库,用于将HTML表格转换为高度交互的数据展示工具。它提供了丰富的功能,包括数据检索、排序、过滤、分页和自定义样式,使得网页上...

    jquery datatable

    $('#example').DataTable({ data: [ // 数据数组 ], columns: [ { title: "Name" }, { title: "Position" }, { title: "Office" }, { title: "Age" }, { title: "Start date" }, { title: "Salary" } ] ...

    jQuery datatable1.10.5 api

    **jQuery Datatables 1.10.5 API 深度解析** jQuery Datatables 是一个功能强大的、高度可定制的数据展示插件,广泛应用于网页表格的动态化和增强交互性。1.10.5 版本是 Datatables 的一个重要里程碑,它提供了丰富...

    jquery的DataTable

    **jQuery的DataTable插件详解** jQuery的DataTable是一个强大的、高度可配置的JavaScript库,用于将HTML表格转换为功能丰富的数据网格。它提供了丰富的排序、过滤、分页、搜索和显示功能,大大增强了网页中表格的...

    jquery DataTable实现前后台动态分页

    这里我们将详细讲解如何使用jQuery DataTable实现后台动态分页。 首先,确保在HTML文件中引入了必要的CSS和JavaScript库,如jQuery核心库、DataTables库以及Bootstrap样式库(如果需要的话)。在提供的代码中,可以...

    jquery.dataTable.js 使用详解 一、基础配置

    《jQuery.dataTables.js 使用详解——一、基础配置》 在网页开发中,数据展示是一个重要的环节,而jQuery.dataTables.js插件为高效、美观的数据表格呈现提供了强大的解决方案。本篇将深入探讨该插件的基础配置,...

Global site tag (gtag.js) - Google Analytics