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>
分享到：
相关推荐
使用jquery DataTable在js中这么写 $(function() { $('#data-table').DataTable( { order : [ [ 1, 'desc' ] ], ajax : { url : /products, type : 'GET', dataSrc : }, ...
标签中提到了知识点的关键词，包括“jQuery”、“datatables插件”、“ajax”、“加载数据”、“增删改查”。这些关键词代表了本文档所要讲述的主要内容。 从【部分内容】中，我们可以提取以下知识点： - 使用HTML...
初始化`DataTable`时，可以设置一系列参数来定制其行为，如`columnDefs`用于定义列的样式和行为，`ordering`控制列的排序，`searching`定义是否启用全局搜索，`paging`控制分页功能等。 **3. 表格操作（Table ...
jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...
在本文中，我们将深入探讨jQuery DataTable插件，它是一个强大的数据展示工具，广泛用于Web开发中的表格操作。标题“Jquery dataTable完整例子（取数据、分页、样式等）”和描述表明，我们将讨论如何利用这个插件...
Jquery DataTable是一个很不错的表格插件。 1、功能强大，支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源； 4、众多使用者的实例代码
**jQuery DataTables 服务器端分页详解** jQuery DataTables 是一款功能强大的JavaScript库，用于将HTML表格转化为交互式数据视图。服务器端分页（Server-side pagination）是其核心特性之一，尤其适用于处理大量...
在.Net下使用Jquery DataTable，首先需要确保在项目中引入了jQuery库以及DataTable的JavaScript和CSS资源。可以通过NuGet包管理器安装jQuery，然后从CDN或本地资源路径引入DataTable的库文件，例如： ```html ...
**jQuery DataTables插件V2.0详解** jQuery DataTables是一款功能强大的JavaScript表格插件，它为HTML表格提供了丰富的交互式功能，如排序、搜索、分页和自定义数据处理等。在V2.0版本中，这个插件进一步提升了性能...
3. **Ajax请求设置**：在前端，使用JQuery Datatable的Ajax选项设置，使表格能够通过Ajax请求从服务器获取数据。这通常涉及到`url`参数，指向Struts 2 Action的映射路径。 4. **Datatable初始化**：设置Datatable的...
### jQuery DataTable大数据分页解决方案详解 #### 一、概述 在处理大数据时，尤其是在Web应用中展示大量数据，如何高效地进行数据分页是一项重要的技术挑战。jQuery DataTable插件因其强大的功能和灵活性，在Web...
**jQuery DataTables 全面解析** `jQuery DataTables` 是一个功能强大的JavaScript库，用于将HTML表格转换为高度交互的数据展示工具。它提供了丰富的功能，包括数据检索、排序、过滤、分页和自定义样式，使得网页上...
在本文中，我们将深入探讨如何使用Bootstrap、jQuery和DataTable库实现异步AJAX来刷新表格数据的方法。这个功能常用于动态更新数据展示，无需页面整体刷新，提高用户体验。 首先，让我们了解一下涉及的关键技术和...
$('#example').DataTable({ data: [ // 数据数组 ], columns: [ { title: "Name" }, { title: "Position" }, { title: "Office" }, { title: "Age" }, { title: "Start date" }, { title: "Salary" } ] ...
**jQuery Datatables 1.10.5 API 深度解析** jQuery Datatables 是一个功能强大的、高度可定制的数据展示插件，广泛应用于网页表格的动态化和增强交互性。1.10.5 版本是 Datatables 的一个重要里程碑，它提供了丰富...
**jQuery的DataTable插件详解** jQuery的DataTable是一个强大的、高度可配置的JavaScript库，用于将HTML表格转换为功能丰富的数据网格。它提供了丰富的排序、过滤、分页、搜索和显示功能，大大增强了网页中表格的...
这里我们将详细讲解如何使用jQuery DataTable实现后台动态分页。 首先，确保在HTML文件中引入了必要的CSS和JavaScript库，如jQuery核心库、DataTables库以及Bootstrap样式库（如果需要的话）。在提供的代码中，可以...
《jQuery.dataTables.js 使用详解——一、基础配置》 在网页开发中，数据展示是一个重要的环节，而jQuery.dataTables.js插件为高效、美观的数据表格呈现提供了强大的解决方案。本篇将深入探讨该插件的基础配置，...