Question

我尝试在我的网站上使用数据表，但在我添加网络上的所有内容后，它并没有显示我看到的模板之类的东西。这是模板这就是我得到的东西

我的意思是我看不到加号按钮，所以我看不到产品的细节。这个按钮只显示当我使浏览器变得像这样小，但即使浏览器像模板一样大，我也需要它

你有任何想法，请帮忙吗？这是我遵循的模板： https://datatables.net/extensions/responsive/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

任何正在寻找Bootstrap（我正在使用5.0版本alpha1）支持的响应数据表的人，这就是我所做的，并且它“只是”有效：

<link rel="stylesheet"
    th:href="@{/css/bootstrap.css}" />
<link rel="stylesheet"
    th:href="@{/webjars/datatables/css/dataTables.bootstrap4.min.css}" />
<link rel="stylesheet"
    th:href="@{/webjars/datatables-responsive/2.2.3/css/responsive.bootstrap4.min.css}" />


<your> html code here </your>


<div th:fragment="import_scripts">
<script type="text/javascript"
        th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/datatables/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script type="text/javascript"
        th:src="@{/js/bootstrap.js}"></script>
<script type="text/javascript"
        th:src="@{/webjars/datatables/1.10.20/js/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/webjars/datatables-responsive/2.2.3/js/dataTables.responsive.min.js}"></script>
<script th:src="@{/webjars/datatables-responsive/2.2.3/js/responsive.bootstrap4.min.js}"></script>

您可以将路径更改为自己的css / js文件，但此处重要部分是这些文件的顺序。确保已按照上述顺序正确放置了CSS和JS。

这是最终结果：

此外，有时CSS / JS库的版本号也是如此可以有所作为。

我正在使用这些工具：JQuery 3.5.1，PopperJS 1.16.0，Datatable 1.10.20

希望它对某人有帮助。

Answer 3

最好的答案是使用“ sensitivePriority”，默认情况下，如果您要自行更改，则所有优先级均为10,000，例如：

sortable: false,
data: "Id",
className: 'details-control',
responsivePriority: 1

Answer 4

也许没有关于＆＃34; javascript＆＃34;的原因。你可以查看你的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;

}

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

Answer 5

我还隐藏了控件图标，所以我解决的问题是添加属性：

 type: 'column'

根据问题中的示例，它看起来像这样：

$('#example').DataTable( {
    responsive: {
        details: {
            type:'column',
            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 6

如果要在页眉中显示搜索框，只需编写 CSS ，如下所示... 在数据表中...

tfoot {display: table-header-group;}

Answer 7

在你的css中添加这个

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
    content: "-";
    background-color: #d33333;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    top: 33%;
    left: 5px;
    height: 1em;
    width: 1em;
    margin-top: -5px;
    display: block;
    position: absolute;
    color: white;
    border: .15em solid white;
    border-radius: 1em;
    box-shadow: 0 0 0.2em #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: "Courier New",Courier,monospace;
    line-height: 1em;
    content: "+";
    background-color: #31b131;
}

在你的JS中添加这个

targets": [0]-索引要显示的列

view_tbl = $('#tbl').DataTable({ “阿贾克斯”：{ “网址”：网址， "type": "POST", 数据： { 动作：load_action } }, “响应”：真的， “列定义”：[ {className: "dtr-control", "targets": [0]},

Answer 8

我在 node 上使用它，但没有导入 css。我将此添加到我的 app.scss 中，瞧！

@import "~datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css";

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

8 个答案: