Question

我正在使用datatables v1.10.11，jquery 1.12.0和bootstrap 3.3.6。我已按照https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html中的示例进行操作，但无法显示第一列中的图标。

<h1>meal calculator</h1>

<div id='dinerForm'>
    <label>What are the names of the diners?<input type='text' id='dinerName'></label>
    <button type="button" onclick="buildDinerList()">Add to List</button>
</div>
<script>

//I'd like to be able to enter the names of the people in my party, ie., all diners
var dinerList = {};
function buildDinerList() {
dinerList.dinerName = document.getElementById('dinerName').value;
};

</script>

Answer 1

更改参考

<link rel="stylesheet" href="asset/css/vendor/datatables/responsive.bootstrap.min.css">

到

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.bootstrap.min.css">

因为响应式引导程序的本地参考不起作用请检查相对路径即使它没有工作，那么

添加一个风格

的课程

.yourclass{
top: 8px;
left: 4px;
height: 16px;
width: 16px;
display: block;
position: absolute;
color: white;
border: 2px solid white;
border-radius: 16px;
box-shadow: 0 0 3px #444;
box-sizing: content-box;
text-align: left;
font-family: 'Courier New', Courier, monospace;
text-indent: 4px;
line-height: 16px;
content: '+';
background-color: #337ab7;
}

并在第一栏

中使用它

数据表响应扩展/折叠图标消失

1 个答案: