数据表未显示按钮的详细信息

Question

我试图在Web上使用数据表，但是在我将所有内容添加到Web后，它并没有显示我看到的模板那样的内容。这是模板 这就是我得到的

我的意思是我看不到加号按钮，所以我看不到产品的详细信息。此按钮仅在我使浏览器变小时显示，但是即使浏览器像模板中的那样大，我也需要

你有什么想法，请帮忙？这是我遵循的模板：https : //datatables.net/extensions/response/examples/display-types/foundation-modal.html 这是我的脚本：

$(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 width="100%"/>').append( data );
            }
        }
    }
} );

}）；

Answer 1

对于仍然在2018年发现此问题的任何人

我发现我的“加号”按钮不出现的问题（在响应式移动视图中）是因为它们被附加到该行的“第一个子级”，因此如果第一个子级以外的行被赋予了比该行，则按钮随之消失。

Answer 2

也许不是“javascript”的原因。你可以检查你的html或css，通过比较你的两张图片，你的框架结构应该有一些问题；当浏览器窗口较大时，你可以按f12查看这些代码是否存在：

table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
  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;
  font-family: 'Courier New', Courier, monospace;
  text-indent: 4px;
  line-height: 16px;
  content: '+';
  background-color: #008CBA;

}

因为代码决定了这个按钮的存在。希望它可以帮助你！像这样：