DataTable responsive display certain columns

问题

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!

回答1:

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.

回答2:

It looks like you need this:

The column priority can also be defined by a data-priority attribute on the column's header cell (for example First name).

回答3:

After searching docs, I came across this:

none - Don't display as a column, but show in the child row

This solved it!

来源：https://stackoverflow.com/questions/43273618/datatable-responsive-display-certain-columns

标签

jquery

datatables

datatables-1.10