DataTable 响应式显示某些列 [英] DataTable responsive display certain columns
问题描述
我正在使用
我只需要显示到 'Column3', 'Column3', 'Column 7', 'Column 8', 'Column 10' 并隐藏其他(这些应该通过扩展控件显示在每一行的末尾).
JS:
$( 'table' ).DataTable( {顺序: [ [ 0, "asc" ] ],响应:{细节: {类型:'列'，目标:'tr'}},列定义: [ {班级名称:'控制'，可订购:假，目标:-1]]});这是JSFiddle.任何建议！
要在响应式数据表中显示特定列，您只需添加 Class Controls 在表的 th 中，如下:
<头><tr><th class="all">第1列</th><th class="none">第 2 列</th><th class="all">第3列</th><th class="none">第4列</th><th class="none">第5列</th><th class="none">第6列</th><th class="all">第7列</th><th class="all">第8列</th><th class="none">第 9 列</th><th class="all">第 10 列</th><th class="none">第 11 列</th><th class="all"></th></tr></thead>class "all":无论屏幕大小如何，始终显示列.
class "none":不显示为列，而是显示在子行中.
<小时>这里是它的工作演示.
I am using DataTables along with responsive and facing issues while trying to display only certain columns.
Table layout is like this:
I need to display to only 'Column 1', 'Column3', 'Column 7', 'Column 8', 'Column 10' and hide others( these should be displayed by expand control at the end of each row ).
JS:
$( 'table' ).DataTable( {
order: [ [ 0, "asc" ] ],
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: -1
} ]
} );
This is the JSFiddle. Any suggestions!
解决方案 To show specific columns in responsive datatable, you just need to add Class Controls in th of table, as follow:
<table class="table table-hover table-striped">
<thead>
<tr>
<th class="all">Column 1</th>
<th class="none">Column 2</th>
<th class="all">Column 3</th>
<th class="none">Column 4</th>
<th class="none">Column 5</th>
<th class="none">Column 6</th>
<th class="all">Column 7</th>
<th class="all">Column 8</th>
<th class="none">Column 9</th>
<th class="all">Column 10</th>
<th class="none">Column 11</th>
<th class="all"></th>
</tr>
</thead>
class "all": Always display column irrespective of the screen size.
class "none": Don't display as a column, but show in the child row.
Here is its working demo.
这篇关于DataTable 响应式显示某些列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆