我使用的是最新版本的jQuery数据表与响应扩展。
在平板电脑或台式机上一切正常,但如果屏幕低于600px
。当响应启动时,我有4列,在某些平板电脑中只隐藏1列很好,但有些手机只隐藏2列,让我显示2列。
我想隐藏最后3列,只留下第一列,如果可能的话,只有当屏幕或移动低于600px
的宽度。
我正在阅读数据表文档,但我找不到任何东西隐藏所有当屏幕下降到X宽度以下。
$('#teamTable').DataTable({
iDisplayLength: 50,
columns: [
{width: '220px' },
null,
null
],
responsive: {
details: {
type: 'column'
}
},
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0,0 ] }
],
oLanguage: {
oPaginate: {
sNext: "Next Play",
sPrevious: "Prv. Play"
},
sInfo: "_TOTAL_ plays, showing (_START_ of _END_)",
sSearchPlaceholder: "Linker...",
sSearch: ''
}
});
我知道我使用的选项名来自以前版本的数据表,但他们仍然工作。
当屏幕低于X时,我如何隐藏除一列外的所有列呢?我可以使用CSS来做到这一点,但我们的想法是能够使用jQuery DataTable
<解决方案/strong>
您可以使用responsive.breakpoints
和columns.className
来控制某些列在特定浏览器宽度下的可见性。有关更多信息,请参阅类逻辑页面。
当浏览器宽度为600px或更大时,要折叠4列表中除第一列外的所有列,请使用下面的代码。为了简单起见,我省略了一些代码:
$('#example').DataTable({
responsive: {
breakpoints: [
{ name: 'screen-xs', width: 600 }
]
},
columnDefs: [
{ className: 'screen-xs': targets: [1,2,3] }
]
});
您可以向某些列添加类控件,以便指定哪些列应该以特定的分辨率显示在屏幕上。通过表头的class
属性(https://datatables.net/extensions/responsive/examples/column-control/classes.html)或使用columns.className
选项(https://datatables.net/extensions/responsive/examples/column-control/init-classes.html)
在你的例子中,可能看起来像下面这样:
$('#teamTable').DataTable({
iDisplayLength: 50,
columns: [
{width: '220px', className: 'all'},
null,
null
],
// here comes the rest ...
});