响应式显示某些列

响应式显示某些列

关注
发信
关注(28)粉丝(399)

DataTable 响应式显示某些列

本文介绍了DataTable 响应式显示某些列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用

我只需要显示到 '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.
Source
Here is its working demo.
这篇关于DataTable 响应式显示某些列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-05 00:16
Powered by LMLPHP ©2024 响应式显示某些列 0.039428