【发布时间】：2017-11-04 03:41:09
【问题描述】：
问题
我有两个数据表——一个是五列，另一个是四列——我正在寻找一种方法来隐藏特定屏幕宽度的列。
我尝试过的
当我调整浏览器的大小时，两个表格都会自动显示为一个宽度为 480 像素的两列图表，但我需要在中间设置额外的断点，因为它们不适合在其中放置额外的列视口。
- 将
responsive的类添加到表中，如example 所示 - 我尝试使用 column control helper classes 删除某些断点处的列，但即使添加类
none也没有隐藏列 - 在
thead中向<th>添加类以利用它们的responsive breakpoints - 我已在我的 DataTables 选项中包含
responsive: true
scripts.js
$('#test-scores').dataTable({
initComplete: function () {
this.api().columns([0,1,2]).every( function () {
var column = this;
var colIdx = column.index();
// adjust label for dropdown according to index
// TODO - colIdx is producing 0
if (colIdx === 0) {
var label = 'districts';
}
else if (colIdx === 1) {
var label = 'schools';
}
else {
var label = 'subjects';
}
var select = $('.select--map-' + label)
.on( 'change', function () {
var val = $(this).val();
if ( val == '*' ) {
column
.search( '' )
.draw();
}
else {
val = $.fn.dataTable.util.escapeRegex( val );
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
}
});
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
});
});
},
"pageLength": 25, // The number of entries per page
"order": [0, 'asc'], // First column in ascending order, previous "3, desc"
"responsive": true,
"searching": true,
"columns": [
{ "data": "district",
"render": function (data, type, row, meta) {
return '<a href="/schools/' + makeSlug(data) + '">' + data + '</a>';
}
},
{ "data": "school",
"render": function (data, type, row, meta) {
return '<a href="/schools/' + makeSlug(row['district']) + '/' + makeSlug(data) + '">' + data + '</a>';
}
},
{ "data": "subject" },
{
"data": "rate",
// https://datatables.net/manual/data/renderers#Built-in-helpers
// Render.number() parameters: thousands separator, decimal separator, decimal places, prefix, suffix
"render": $.fn.dataTable.render.number( ',', '.', 1, '', '%' )
},
{
"data": "test_takers",
// Render.number() parameters: thousands separator, decimal separator, decimal places, prefix, suffix
"render": $.fn.dataTable.render.number( ',', '.', 0, '', '' )
}
],
"ajax": {
"url": "{% static 'schools/json/school_map_scores.json' %}"
}
});
index.html
<table id="test-scores" class="table table-striped responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th class="table-district none">District</th>
<th class="table-school none">School</th>
<th class="table-subject none">Subject</th>
<th class="table-proficiency none">Pct. proficient</th>
<th class="table-testtakers none">No. of test takers</th>
</tr>
</thead>
<tbody></tbody>
</table>
【问题讨论】：
-
如果您的表格在弹性框中溢出，但在其他地方没有溢出，您可能因此遇到了显示问题如果是这种情况，将
overflow: hidden;flex-shrink:1;添加到最近的弹性元素将解决问题
标签： javascript jquery css datatable datatables