jquery DataTables插件显示表格
该插件可对表格进行排序、查询、分页
并使用jEditable插件可对表格进行编辑，并返回到server端进行保存
官网：http://www.datatables.net/
附件1：从官网下载的文件
附件2：根据官网实例进行的修改
<!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>
User Email
</th>
<th>
Register Way
</th>
<th>
Service Name
</th>
<th>
Domain
</th>
<th>
State
</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
分享到：
请教下，我要固定标题 ，下面的数据内容可以滚动，这个要怎么设置呢？
相关推荐
Datatables是一款基于jQuery的开源表格插件，广泛应用于网页数据展示和管理。它以其丰富的功能、高度的灵活性和良好的社区支持而备受青睐。这个插件的主要目标是将静态或者动态生成的HTML表格转变为具有强大交互性的...
总结来说，jQuery DataTables插件为HTML表格提供了强大的功能和灵活性，无论是基础的排序和过滤，还是更复杂的自定义需求，都能满足。配合合理的配置和API使用，可以极大地提升网页数据管理的用户体验。
jQuery DataTables插件是一款强大的数据展示工具，专为HTML表格设计，它提供了丰富的功能，如静态分页、排序、固定表头以及AJAX事件处理，让网页中的数据管理变得简单而高效。以下是对这个插件及其相关功能的详细...
2. **CSS 文件**: DataTables 提供了预设的样式文件（如 `dataTables.bootstrap.css` 或 `dataTables.foundation.css`），这些文件用于美化表格的显示效果，使其适应不同的前端框架（如Bootstrap、Foundation等）。...
综上所述，使用jQuery DataTables插件需要在后台设计一个符合规范的数据接口，并处理各种查询条件、排序和分页请求。在实现过程中，安全性和性能优化是不可忽视的关键因素。通过合理的数据处理和传输，我们可以构建...
DataTables是一款基于jQuery库的强大的表格插件，它极大地增强了HTML表格的功能，提供了丰富的排序、搜索、分页、列操作等交互性功能。这个插件的设计目标是为开发者提供一个高度可定制、易于使用的工具，使得网页上...
`Mvc.JQuery.Datatables`是一个非常实用的插件，它允许开发者轻松地将流行的JQuery Datatables库与ASP.NET MVC框架集成，从而实现高效、动态和交互式的表格数据展示。这个插件极大地简化了在.NET环境中使用...
在Web开发中，数据展示和管理是一项常见的任务，而jQuery DataTables插件为此提供了一种高效且功能丰富的解决方案。本文将深入探讨jQuery DataTables及其相关的CSS，以及如何结合使用它们来提升网页表格的交互性和...
**jQuery DataTables 深入理解与应用** jQuery DataTables 是一个强大且功能丰富的JavaScript库，用于增强HTML表格。它提供了各种高级特性，如分页、排序、过滤、搜索、数据加载以及更多，大大提升了用户体验。在这...
1. jQuery+datatables插件实现：这是指使用jQuery结合datatables插件来实现特定的网页表格功能，例如数据的动态加载、分页、排序等。 2. ajax加载数据：涉及通过ajax技术从服务器端动态获取数据，并在网页上实时...
dataTables插件充分利用了jQuery的简洁和高效，使得在网页上实现复杂的表格操作变得轻而易举。 ### 数据表格核心特性 1. **数据排序**：dataTables支持多列排序，用户只需点击表头即可按指定列进行升序或降序排序...
jQuery DataTables是一款强大的数据表格插件，它允许开发者轻松地将HTML表格转化为功能丰富的数据展示工具。这个组件以其强大的搜索、排序、分页和过滤功能而受到广泛欢迎，尤其适用于处理大量数据。在Eclipse开发...
Spring Boot结合MybatisPlus框架提供了高效的数据处理能力，而JQuery DataTables表格插件则是一个强大的前端工具，可以方便地实现这些功能。下面将详细介绍这个集成方案的相关知识点。 1. **Spring Boot** Spring ...
在我们的案例中，产品经理要求前端开发者利用DataTables插件展示列表数据，并实现分类效果。后端提供了一个分页接口，只能返回指定页码和显示数据条数的数据，不允许前端直接修改后端接口。 在问题描述中提到了两种...
《jQuery DataTables插件详解与应用》 jQuery DataTables 是一款功能强大的JavaScript表格插件，它基于jQuery库，能够将HTML表格转化为具有高级特性的数据展示工具，如排序、搜索、分页等。"jquery.dataTables包....
总的来说，`jQuery DataTables 1.9.4`是一个强大且易用的表格插件，适用于各种数据展示需求，无论是简单的数据列表还是复杂的数据管理应用，都能得心应手。通过其丰富的功能和良好的扩展性，可以极大地提高开发效率...
jQuery DataTables插件，用于在行中呈现嵌套的DataTables。 内部表独立于外部表的数据和布局。 安装 下载并包含文件 NPM $ npm install nested-datatables 用法 var table = new nestedTables . TableHierarchy ( '...
jQuery DataTables提供了丰富的API，允许开发者在运行时对表格进行操作，如`fnDraw()`用于重新绘制表格，`fnFilter()`用于过滤数据。此外，还有大量插件可供选择，例如`Buttons`用于导出数据，`Responsive`实现响应...
1. **引入资源**：首先在页面中引入jQuery库和DataTables插件的CSS和JS文件。 2. **初始化表格**：通过jQuery选择器找到表格元素，并调用`.DataTable()`方法进行初始化。可以传递配置对象，设置排序、搜索、分页等...
总结，jQuery DataTables插件通过简单的配置和强大的API，让HTML表格具备了丰富的交互性和功能，为Web开发人员提供了高效的数据展示解决方案。通过学习和实践，开发者可以轻松地创建出符合需求的动态数据表格。