CODEWITHSUNDEEP
jquerydatatablesdatatables-1.10
Abhishekh Gupta
Abhishekh Gupta

Reputation: 6236

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: enter image description here

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!

Upvotes: 13

Views: 27425

Answers (2)

Mick
Mick

Reputation: 1561

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).

Upvotes: 3

mmushtaq
mmushtaq

Reputation: 3520

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.

Upvotes: 39

Related Questions