数据表响应式展开/折叠图标消失答案

【问题标题】：datatables responsive expand/collapse icon disappear数据表响应式展开/折叠图标消失
【发布时间】：2016-03-27 14:18:56
【问题描述】：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="asset/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="asset/css/vendor/datatables/dataTables.jqueryui.min.css">
    <link rel="stylesheet" href="asset/css/vendor/datatables/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="asset/css/vendor/datatables/responsive.bootstrap.min.css"> 

  </head>

  <body>
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
        <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>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Jennifer</td>
                <td>Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
                <td>9239</td>
                <td>j.chang@datatables.net</td>
            </tr>
            <tr>
                <td>Zenaida</td>
                <td>Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
                <td>$125,250</td>
                <td>7439</td>
                <td>z.frank@datatables.net</td>
            </tr>
            <tr>
                <td>Zorita</td>
                <td>Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>
                <td>$115,000</td>
                <td>4389</td>
                <td>z.serrano@datatables.net</td>
            </tr>
            <tr>
                <td>Jennifer</td>
                <td>Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
                <td>$75,650</td>
                <td>3431</td>
                <td>j.acosta@datatables.net</td>
            </tr>
        </tbody>
    </table>
    <script src="asset/js/vendor/jquery-1.12.0.min.js"></script>   
    <script src="asset/js/vendor/bootstrap.min.js"></script>
    <script src="asset/js/vendor/jquery.responsiveTabs.min.js"></script>
    <script src="asset/js/vendor/jquery.dataTables.min.js"></script>
    <script src="asset/js/vendor/dataTables.bootstrap.min.js"></script>
    <script src="asset/js/vendor/dataTables.responsive.min.js"></script>
    <script src="asset/js/vendor/responsive.bootstrap.min.js"></script>   

<script>

$(document).ready(function() {
    $('#example').DataTable( {
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data[0]+' '+data[1];
                    }
                } ),
                renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                        return '<tr>'+
                                '<td>'+col.title+':'+'</td> '+
                                '<td>'+col.data+'</td>'+
                            '</tr>';
                    } ).join('');

                    return $('<table class="table"/>').append( data );
                }
            }
        }
    } );
} );

</scirpt>
  </body>
</html>

【问题讨论】：

标签： jquery datatables

【解决方案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;
}

并在您的第一列中使用它

【讨论】：

不起作用。我添加到第一列，如 Tiger 但它在标题部分出现一个蓝色圆圈，根本没有任何作用
请参考cdn.datatables.net/responsive/2.0.2/css/responsive/2.0.2/css/…认为本地库不工作或不兼容。使用cdn版本。我有刚刚为您提供了我从开发人员工具中获得的按钮的 css 样式。
我是从 CDN 下载的，是同一个文件