Javascript 数据表-模式显示-图标不显示
我正在尝试开发以下功能， 我遵循了完全相同的步骤，但是我没有得到启动模态对话框的图标 这是完整的代码Javascript 数据表-模式显示-图标不显示,javascript,jquery,twitter-bootstrap,datatables,Javascript,Jquery,Twitter Bootstrap,Datatables,我正在尝试开发以下功能， 我遵循了完全相同的步骤，但是我没有得到启动模态对话框的图标 这是完整的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Responsive</title> <link
<!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 width="100%" 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>
反应敏捷的
$（文档）.ready（函数（）{
变量数据集={
“数据”：[
{
“名字”：“Airi”，
“姓氏”：“Satou”，
“职位”：“会计”，
“办公室”：“东京”，
“开始日期”：“2008年11月28日”，
“工资”：“$162700”
},
{
“名字”：“Angelica”，
“姓氏”：“拉莫斯”，
“职位”：“首席执行官（CEO）”，
“办公室”：“伦敦”，
“开始日期”：“2009年10月9日”，
“工资”：“$1200000”
},
{
“名字”：“阿什顿”，
“姓”：“考克斯”，
“职位”：“初级技术作者”，
“办公室”：“旧金山”，
“开始日期”：“2009年1月12日”，
“工资”：“$86000”
},
{
“名字”：“布拉德利”，
“姓”：“格里尔”，
“职位”：“软件工程师”，
“办公室”：“伦敦”，
“开始日期”：“10月13日12日”，
“工资”：“$132000”
},
{
“名字”：“布伦登”，
“姓”：“瓦格纳”，
“职位”：“软件工程师”，
“办公室”：“旧金山”，
“开始日期”：“2011年6月7日”，
“工资”：“$206850”
},
{
“名字”：“Brielle”，
“姓”：“威廉姆森”，
“职位”：“集成专家”，
“办公室”：“纽约”，
“开始日期”：“12月2日”，
“工资”：“$372000”
},
{
“名字”：“布鲁诺”，
“姓氏”：“纳什”，
“职位”：“软件工程师”，
“办公室”：“伦敦”，
“开始日期”：“5月3日11日”，
“工资”：“$163500”
},
{
“名字”：“凯撒”，
“姓”：“万斯”，
“职位”：“售前支持”，
“办公室”：“纽约”，
“开始日期”：“12月11日”，
“工资”：“$106450”
},
{
“名字”：“卡拉”，
“姓”：“史蒂文斯”，
“职位”：“销售助理”，
“办公室”：“纽约”，
“开始日期”：“11年12月6日”，
“工资”：“$145600”
},
{
“名字”：“塞德里克”，
“姓”：“凯利”，
“职位”：“高级Javascript开发人员”，
“办公室”：“爱丁堡”，
“开始日期”：“3月12日29日”，
“工资”：“$433060”
}
]
}
$.each（dataset.data，函数（i，项）{
item.age=数学地板（（数学随机（）*70）+1）；
item.extn=Math.floor（（Math.random（）*1000）+1）；
})
$（'#示例'）。数据表({
“分页”：false，
“信息”：错误，
“过滤器”：false，
“分页”：false，
检索：对，
“处理”：对，
数据：dataset.data，
列：[{“数据”：“名字”}，
{“数据”：“姓氏”}，
{“数据”：“位置”}，
{“数据”：“办公室”}，
{“数据”：“年龄”}，
{“数据”：“开始日期”}，
{“数据”：“工资”}，
{“数据”：“extn”}]，
响应：{
详情：{
显示：$.fn.dataTable.Responsive.display.modal({
标题：函数（行）{
var data=row.data（）；
警报（row.data.length）
返回“+数据[0]+”+数据[1]的详细信息”；
}
}),
渲染器：$.fn.dataTable.Responsive.renderer.tableAll({
tableClass:“table”
})
}
}
});
});
名字
姓
位置
办公室
年龄
开始日期
薪水
Extn。
您的代码运行正常，当屏幕变小且至少有一列隐藏时，会出现（+）图标