当我在Datatables中单击某个人打开时，如何全部关闭？
在使用 Datatables 插件时，如果你希望在点击某一行时关闭所有其他行的展开状态，可以通过以下步骤实现：
基础概念
Datatables 是一个 jQuery 插件，用于增强 HTML 表格的功能，包括分页、即时搜索和多列排序等。它支持行展开和折叠功能，通常用于显示更多详细信息。
相关优势
- 增强用户体验：通过行展开功能，用户可以更方便地查看详细信息。
- 提高数据可读性：将详细信息隐藏在主表格之下，保持界面整洁。
- 易于集成：与 jQuery 兼容性好，易于集成到现有项目中。
类型与应用场景
- 静态数据表格：适用于数据量不大且不经常变动的场景。
- 动态数据表格：通过 AJAX 加载数据，适用于需要实时更新数据的场景。
解决方案
以下是一个示例代码，展示了如何在点击某一行时关闭所有其他行的展开状态：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Datatables Example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<!-- 表格数据 -->
</tbody>
</table>
<script>
$(document).ready(function() {
var table = $('#example').DataTable({
"responsive": true,
"columnDefs": [
{ "className": "dt-center", "targets": "_all" }
]
});
// 初始化行展开功能
$('#example tbody').on('click', 'tr', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// 如果当前行已经展开，则折叠它
row.child.hide();
tr.removeClass('shown');
} else {
// 折叠所有其他行
table.rows().every(function () {
if (this.child.isShown()) {
this.child.hide();
$('tr', this.node()).removeClass('shown');
}
});
// 展开当前行
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
function format(d) {
// 自定义展开内容的格式
return '<div>详细信息: ' + d.name + '</div>';
}
});
</script>
</body>
</html>解释
- 初始化 Datatables：使用
$('#example').DataTable()初始化表格。 - 行点击事件：通过
$('#example tbody').on('click', 'tr', function () {...})监听行点击事件。 - 折叠所有其他行：在展开当前行之前，遍历所有行并折叠已经展开的行。
- 展开当前行：使用
row.child(format(row.data())).show()展开当前行并显示自定义的详细信息。
通过这种方式，你可以确保每次只有一行是展开状态，从而提高用户体验和数据的清晰度。
相关·内容
我在modal.when中使用数据表搜索，然后打开一个关闭按钮X(单击此按钮，输入搜索文本将被清除)。它工作正常
问题是，当我单击“关闭”按钮时，当我在键盘上单击“search.if”按钮时，它会保持tbody视图，然后它会显示“数据initially.but”(我不想使用keyboard.what )--当我清空搜索框时，它将自动显示数据。搜索
浏览 2提问于2016-09-06得票数 0
回答已采纳
Problem：我正面临着片段中的一个问题。当我单击“编辑文本输入”字段softInput键盘打开时，当我长时间按下“编辑文本”字段时，它将打开“系统操作栏复制”、“粘贴”、“全部”。点击softInput完成(IME action)按钮sofinput(键盘关闭)，但操作栏仍然出现在屏幕上，它不会关闭或消失。单击屏幕上任何位置后，操作栏仍然保持打开状态。因此，<
浏览 4提问于2022-05-23得票数 0
回答已采纳
1回答
在React.js中，我使用的是可见性列扩展。数据、扩展和jQuery都是最新版本。当我单击“显示隐藏”按钮时，它不会将阴影覆盖带到屏幕上，而只是加载一个列列表。当我单击要隐藏的列时，该列将被隐藏。然而，当我做关闭点击关闭弹出，它仍然。我包括了下载软件包管理器所需的所有库和css。';
import 'datatables.net-colreorder-dt&#
浏览 1提问于2019-12-11得票数 0
回答已采纳
我使用的jQuery数据，我想知道如何自动滚动显示细节-控制时，按下。如果我单击表的最后一行，它将打开信息，但用户将永远不知道向下滚动。在使用详细信息控制时，是否可以自动滚动以显示详细信息？当选择绿色加号时，如下所示：
手动滚动之后，它将出现：
是否可以让它自动滚动，让用户看到比必须手动滚动更容易？
浏览 5提问于2015-11-03得票数 0
回答已采纳
2回答
我安装了一些Chrome扩展，在使用时需要打开/关闭。它们的默认状态都为off。但是，当我访问某些特定的网页时，我需要将它们全部打开(在这些扩展中没有筛选页面的选项)。由于这是一项繁重的工作，我正在尝试创建一个Chrome扩展，在单击时，只需将它们全部打开/关闭。第一，是否可以这样做？如果是的话，我该怎么做？例如，我想要自动化
浏览 1提问于2016-09-01得票数 0
回答已采纳
当我单击一行WPF datagrid时，我想打开一个新窗口，其中包含通过使用绑定所单击的行(可以更改)中某个人的信息。我该怎么做呢？如何保存更改后的信息？
提前感谢！
浏览 5提问于2021-01-11得票数 0
3回答
jQuery切换/滑动重置链接
、、、、
基本上，如果你点击一个头部链接，它会通过再次点击它来打开和关闭。如果您单击h3，它们都将打开。如果已经打开了，它会保持打开状态。一个问题是，如果您将它们全部打开，然后关闭并只打开其中一个，然后尝试将它们全部关闭，则必须单击h3两次。这是因为当它们自己打开时，它会给出一个active1类，而当一起打开时<
浏览 0提问于2012-11-21得票数 1
1回答
我的游戏尽量减少当我使用蒸汽覆盖和打开朋友聊天室。它似乎优先新打开的窗口，并使该窗口的活动，从而最小化游戏。当你打开朋友聊天蒸汽打开蒸汽覆盖和桌面的新窗口(它们是同步的，一旦你关闭其中一个，另一个也关闭)。临时解决方案是在开始时打开窗口，而不是关闭它，所以如果我想和某个人聊天，它只是打开新的选项卡，而不是整个窗口。
有人知道如何防止这种行为吗？
浏览 0提问于2017-04-18得票数 7
回答已采纳
是否可以在AJAX请求开始时禁用"Create“按钮(一旦按下按钮)，并在服务器响应(即完成)时启用，以防止可能的双重提交？在创建新条目时会出现该按钮。<button class="btn" tabindex="0">Create</button>
在更新和删除现有条目/行时会出现相同的按钮。同样的情况也会发生在这些按钮上。
浏览 3提问于2016-06-27得票数 0
如果我是Facebook上的另一个朋友，除非被隐藏，否则它必须出现在两个朋友的个人资料上吗？
我想问的是，如果我和你建立了友谊，而你接受了，它是否只会在一个侧面显示朋友，而不是另一个呢？
浏览 0提问于2021-05-26得票数 -1
我在iOS应用程序中使用sqlite。有时，我会在运行时替换sqlite文件，然后关闭并重新打开与它的连接。但是，在连接到新文件时，sqlite似乎常常从旧文件返回查询结果。到目前为止，我的猜测是它以某种方式保留并使用了旧文件中的页面缓存。
所以我的问题是:SQLite的页面缓存在什么情况下会被丢弃？
浏览 0提问于2014-10-31得票数 0
1回答
关闭所有打开的windows脚本
、、、、
通常当我打开的窗口太多时，如下所示：我选择第一个窗口，然后按住"Shift + Arrow down“将其全部选中，然后单击"End Task”关闭所有打开的窗口：是否有任何CMD命令可以立即执行相同的操作，在该命令中，我将运行脚本以执行相同的操作并关闭所有打开的窗口。
浏览 1提问于2016-04-21得票数 1
.profileRowHeader单击元素时，它会做一些事情，并将图标文件夹从关闭更改为打开。现在，如果我单击上面的div 3，div 2仍然有图标文件夹-打开，因此为了防止这种情况，每当单击任何profileHeaderRow时，我都会关闭所有文件夹图标。div中的图标将转到关闭，然后再切换自己打开。.当我单击类profileRowHeader
浏览 2提问于2013-11-15得票数 1
回答已采纳
我有一个网站打开了几个新的标签/窗口。在网站的主页上，有一个“全部关闭”按钮，它应该会关闭从网站打开的所有窗口。乍一看，它似乎工作得很好。但是，主页的名称会被按下“全部关闭”链接时打开的最后一个页面覆盖。这样做的结果是，每当再次调用最后打开的页面时，它不是在新的选项卡中打开，而是在主页面选项卡中<em
浏览 4提问于2013-05-28得票数 0
2回答
在构建时，我多次将其放在源代码中，并尝试使用此函数。然后Delphi开始把所有的表单放在前台。当它完成构建时，我看到了许多表单，我需要关闭它们以返回源代码。更令人不安的是，有时在构建或加载项目时，或者？Delphi也开始将表单推送到前台位置，但它在此操作中挂起。每个表单都会被触摸并带到顶部窗口，它们在任务栏中也是可见的。当全部可见时，Delphi将它们全部隐藏。然后从头再来。
然后
浏览 2提问于2011-01-17得票数 0
我在Udemy上了一门课程，我对 Kubernetes 的世界很陌生，我试图用Kubernetes配置ingress控制器，但是当我在指定的URL上发送请求时，它会返回404 none ，我已经花了10当我更改文件中的内容时，我还使用Skaffold在码头枢纽上自动构建/部署映像。
raw.githubusercontent.com/kubernetes/ingress-nginx/controller-
浏览 2提问于2021-11-16得票数 3
回答已采纳
我基本上是在尝试组合DataTables文档中给出的两个示例中的代码。第一个示例展示了如何在一个页面上有多个DataTables，而另一个示例允许您显示/隐藏每一行的详细信息。我将"dataTable“类应用于每个动态生成的表，因此下面的代码将它们全部转换为DataTables (并禁用对第一列的排序，因为这是显示/隐藏图标的位置)：
浏览 1提问于2012-05-04得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
