- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
来自 docs在数据表中,我们了解如何向数据(JSON/CSV 文件)中的每一行添加子行或详细信息。但是我不想要扩展按钮,扩展名是空的,就像前两个数据条目一样。这就是我的工作内容:
Javascript
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
JSON
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": ""
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": ""
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
},
{
"id": "4",
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012/03/29",
"office": "Edinburgh",
"extn": "6224"
},
]
正如您所看到的,条目 1 和条目 2 的扩展名都是空的,这里我根本不希望显示展开按钮,只显示空白区域。扩展名非空的另外两个应该仍然有显示此信息的按钮。
最佳答案
您可以使用createdRow()检查详细信息单元格的内容,如果该单元格不为空,则有条件地添加 details-control
类。
例如,这会检查 extn
字段是否具有非空值
$(document).ready(function() {
var table = $('#example').DataTable({
"data": data.data,
"columns": [{
"orderable": false,
"data": null,
"defaultContent": ''
}, {
"data": "name"
}, {
"data": "position"
}, {
"data": "office"
}, {
"data": "salary"
}],
"order": [
[1, 'asc']
],
"createdRow": function(row, data, dataIndex) {
if (data.extn !== "") {
$(row).find("td:eq(0)").addClass('details-control');
}
}
});
这是一个 fiddle 演示:https://jsfiddle.net/zephyr_hex/rhgL0294/20/
关于javascript - 将详细信息/子行添加到数据表中的某些条目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47311267/
情况:我想从数据条目列表导航回我的 PageViewController。 before 和 previous 函数起作用 func pageViewController(pageViewContro
尊敬的 StackOverflow 用户 我有一个 gradle 项目,我想将其工件转换为 osgi 包。在这个包中,我有: 我不想导出的包(可能不会出现在 list 的 Export-Package
我为我的 PendingIntent 设置了一个警报。现在我想在我的 Activity 中显示是否设置了此警报。 Intent service = new Intent(context, MyServ
我有 2 个表、作者和书籍 authors 包含唯一的 IDauthorId 书籍也包含此作为外键 我需要知道书籍数量最多的作者。如果 2 个或更多作者并列最多书籍,我需要显示这两位作者 我已经能够通
我有一个名为 prospective_shop 的表,其中一个列名称是“用户名”。用户名未设置为主键,但我想删除所有具有重复用户名的行。我怎样才能以最快的方式做到这一点? 我尝试执行以下操作: ALT
我现在可以添加条目了。在我的应用程序中,用户可以在他的日历上输入约会/事件。但在他这样做之前,它应该向他显示他已经添加的事件。它应该从日历中获取事件并将其显示给他。这该怎么做?我被困在这部分。提前致谢
#include #include #include #include #include #include char *msg; ssize_t write_proc(struct file
我想将大于 1024 个字符的字符串传递到我的模块(文件系统)。由于内核参数限制为 1024 个字符,someone recommended改为使用 sysfs。 我试图包括 this example
我正在尝试使用 SQLAlchemy 构建以下查询(用作包含查询的子查询,该查询定义名为 tbl_outer 的别名): SELECT max(tbl.ts) AS max_1 FROM tbl WH
假设我有两张 map : Map map1 = Map.of( "a", "1", "b", "2", "c", "3", "x
通过简化示例,假设您有以下数据集: A B C Name Group Amount Dave A 2 Mike B 3 Adam C 4
我正在尝试在我的服务器上创建一个三级域虚拟主机。我希望配置设置正确,但我得到一个 ERR_NAME_NOT_RESOLVED错误。 我已经读到我必须在某处“添加 DNS 条目”以便解析名称,但我该怎么
我需要一个可用于在逗号分隔列表中查找第 N 个条目的正则表达式。 例如,假设此列表如下所示: abc,def,4322,mail@mailinator.com,3321,alpha-beta,43 .
GWT 应用程序(在 Eclipse 中开发)的源代码管理忽略文件中的典型条目是什么? 最佳答案 我会推荐: 你leave the eclipse files (.project, .classpat
我必须创建显示表 (Tbl) 中所有字段的输出,并创建一个额外的列来按月计算每个客户的累计总和(例如,如果客户在 4 月份有两次销售,新列将具有这些销售额和两行中任何先前销售额的总和)。我能做的就这么
文档 ( http://kubernetes.io/docs/user-guide/configmap/ ) 上用于使用值的示例基于 ConfigMap,其中每个数据条目都是一对/值。例子: apiV
我有一个奇怪的错字,我一遍又一遍地犯,而不是实际工作我的打字技巧,我想编辑我的 AutoHotkey 脚本来弥补这一点。 有时,当我输入大写字母时,我会点击:按钮并输入“I:”,我希望 AHK 仅用字
使用 lgdt 初始化 GDT 并将其加载到 GDTR 后,稍后如何更新 GDT? 如果我使用 sgdt 命令获取基地址,然后更新或添加条目,然后使用 lgdt 再次重新加载,我是否正确?还有其他方法
我有两个应用程序共享同一个数据库,即 API 和 MVC5 应用程序。两者都在本地主机上运行良好,但在部署到我的 Azure 帐户时出现此错误 Configuration Error Descrip
我正在尝试修剪我拥有的一些文件。我将为您保存到目前为止我编写的野兽,并通过提供虚构代码使其保持简单。 让我们来看看这个数组: [System.String[]]$Collection = 'Invit
我是一名优秀的程序员,十分优秀!