Question

我在我们的网络应用程序中使用DataTables和响应式扩展，但我有一个问题。

当表格响应时，它应该隐藏分页选项。

我用＆＃34; bLengthChange＆＃34;：false：

尝试了这个

 $(function () {
        $("#table1").DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json"
            },
            "order": [[1, "asc"]],
            "bAutoWidth": false,
            responsive: {
                details: {
                    type: 'column'
                },
                "bLengthChange": false
            },
            columnDefs: [ {
                className: 'control',
                orderable: false,
                targets:   0
            } ],
        });
    });

然而，这不起作用。我的目标是我可以在全屏上看到分页量下拉菜单，但如果有响应，则应隐藏该选项。

我可以添加bLengthChange这样的选项，特别是＆＃34;响应＆＃34;状态？

Answer 1

我可以添加特定于“响应式”的bLengthChange等选项状态？

不，你不能。请再次检查$.fn.dataTable.Responsive.defaults，因为我相信您已经完成了。它没有太多意义，响应式扩展是扩展，而lengthMenu是核心功能。如果你想隐藏lengthMenu，你需要重新初始化表或做一些可能会或可能不会与其他功能或其他扩展冲突的hackish。但你可以自己做黑客攻击。隐藏在responsive-resize事件中，根据响应状态隐藏或显示lengthMenu：

table.on( 'responsive-resize', function ( e, datatable, columns ) {
  var $lengthMenu = $('.dataTables_length')
  var count = columns.reduce( function (a,b) {
    return b === false ? a+1 : a;
  }, 0 );
  if (count>0 && $lengthMenu.is(':visible')) $lengthMenu.hide()
  if (count<= 0 && !$lengthMenu.is(':visible')) $lengthMenu.show()
} );

演示 - ＆gt;的 http://jsfiddle.net/v1dnxLkg/

Answer 2

谢谢。

使用此CSS修复了它：

@media screen and (max-width: 767px){
    div.dataTables_wrapper > div.row > div > div.dataTables_length{
        display: none;
    }
}

数据表响应，设置特定选项

2 个答案: