DataTables - 模态显示 - 图标不显示
Posted
技术标签:
【中文标题】DataTables - 模态显示 - 图标不显示【英文标题】：DataTables - modal display - icons not displaying 【发布时间】：2018-03-06 16:38:16 【问题描述】：我正在尝试开发以下功能， https://datatables.net/extensions/responsive/examples/display-types/modal.html
我遵循了完全相同的步骤，但是我没有获得启动模式对话框的图标，
这是完整的代码，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Responsive</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script>
$(document).ready(function ()
var dataset =
"data": [
"first_name": "Airi",
"last_name": "Satou",
"position": "Accountant",
"office": "Tokyo",
"start_date": "28th Nov 08",
"salary": "$162,700"
,
"first_name": "Angelica",
"last_name": "Ramos",
"position": "Chief Executive Officer (CEO)",
"office": "London",
"start_date": "9th Oct 09",
"salary": "$1,200,000"
,
"first_name": "Ashton",
"last_name": "Cox",
"position": "Junior Technical Author",
"office": "San Francisco",
"start_date": "12th Jan 09",
"salary": "$86,000"
,
"first_name": "Bradley",
"last_name": "Greer",
"position": "Software Engineer",
"office": "London",
"start_date": "13th Oct 12",
"salary": "$132,000"
,
"first_name": "Brenden",
"last_name": "Wagner",
"position": "Software Engineer",
"office": "San Francisco",
"start_date": "7th Jun 11",
"salary": "$206,850"
,
"first_name": "Brielle",
"last_name": "Williamson",
"position": "Integration Specialist",
"office": "New York",
"start_date": "2nd Dec 12",
"salary": "$372,000"
,
"first_name": "Bruno",
"last_name": "Nash",
"position": "Software Engineer",
"office": "London",
"start_date": "3rd May 11",
"salary": "$163,500"
,
"first_name": "Caesar",
"last_name": "Vance",
"position": "Pre-Sales Support",
"office": "New York",
"start_date": "12th Dec 11",
"salary": "$106,450"
,
"first_name": "Cara",
"last_name": "Stevens",
"position": "Sales Assistant",
"office": "New York",
"start_date": "6th Dec 11",
"salary": "$145,600"
,
"first_name": "Cedric",
"last_name": "Kelly",
"position": "Senior javascript Developer",
"office": "Edinburgh",
"start_date": "29th Mar 12",
"salary": "$433,060"
]
$.each(dataset.data, function (i, item)
item.age = Math.floor((Math.random() * 70) + 1);
item.extn = Math.floor((Math.random() * 1000) + 1);
)
$('#example').DataTable(
"paging": false,
"info": false,
"filter": false,
"paging": false,
retrieve: true,
"processing": true,
data: dataset.data,
columns: [ "data": "first_name" ,
"data": "last_name" ,
"data": "position" ,
"data": "office" ,
"data": "age" ,
"data": "start_date" ,
"data": "salary" ,
"data": "extn" ],
responsive:
details:
display: $.fn.dataTable.Responsive.display.modal(
header: function (row)
var data = row.data();
alert(row.data.length)
return 'Details for ' + data[0] + ' ' + data[1];
),
renderer: $.fn.dataTable.Responsive.renderer.tableAll(
tableClass: 'table'
)
);
);
</script>
</head>
<body>
<table class="table table-striped table-bordered nowrap" id="example" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
输出：
您甚至可以将整个代码复制并粘贴到 HTML 文件中，然后运行它来查看行为。
我没有在控制台中看到任何错误。我使用 IE 11 和 Chrome 进行了测试。
非常感谢任何建议/方向。
编辑：
来自 jsbin.com/hehewiz/edit?html 的快照，输出。 （链接由 bazzells 创建）
【问题讨论】：
这里对我有用 - jsbin.com/hehewiz/edit?html,output。我所做的只是将data[0] 和data[1] 的引用指向data['first_name'] 和data['last_name']，因为data 是一个对象。
@bazzells，在您提供的链接中，我没有在每一行中看到启动模式对话框的图标。
是的，我在 Output 打开时也看到了这一点，但是当我打开第二个选项卡时，图标就会出现。 screencast.com/t/Hp0y9xoovCb
如果您将collapsed 类添加到table，当它填满屏幕时，图标就会出现。当collapsed 未应用时，它们会被隐藏。 collapsed 类当前根据 table 的宽度进行切换。
@bazzells，现在工作。将您的评论放在答案部分。我会接受的。
【参考方案1】：
由于collapsed 类已从table 中删除，因此图标在宽屏幕上被隐藏。 collapsed 类正在根据当前窗口宽度进行切换。
【讨论】：
将类“无”添加到列也可以解决问题并显示图标。阅读：datatables.net/extensions/responsive/classes【参考方案2】：您的代码运行良好，当屏幕变小并且至少有一列被隐藏时，会出现 (+) 图标。
这是因为此选项用于响应式显示信息。
【讨论】：
以上是关于DataTables - 模态显示 - 图标不显示的主要内容，如果未能解决你的问题，请参考以下文章
ReactStrap 模态关闭图标未在模态中显示以及如何将标题与其他标签一起使用