2016-09-28 57 views
0

我在我們的Web應用程序上使用DataTables響應式擴展,但我有一個問題。Datatables響應式,設置特定選項

當表格作出響應時,它應該隱藏分頁選項。

我試圖與 「bLengthChange」:假:

$(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嗎?

回答

1

我可以添加像bLengthChange這樣的選項:「響應」 狀態嗎?

不,你不能。再次嘗試檢查$.fn.dataTable.Responsive.defaults,因爲我相信你已經完成了。它也沒有給出太多的意義,響應擴展擴展,而lengthMenu是一個核心功能。如果你想隱藏lengthMenu,你需要重新初始化表格或者做一些可能會或可能不會與其他功能或其他擴展相沖突的事情。但是你可以自己做破解。根據響應狀態掛接到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() 
}); 

演示 - >http://jsfiddle.net/v1dnxLkg/

0

謝謝。

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

這個CSS固定它