Displayed DataTable shows specific columns
I am using DataTables along with responsive and am facing problems when trying to display only certain columns.
The table looks like this:
I only need to show 'Column 1', 'Column3', 'Column 7', 'Column 8', 'Column 10'
and hide others (they should be displayed with an expand control at the end of each line).
JS:
$( 'table' ).DataTable( {
order: [ [ 0, "asc" ] ],
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: -1
} ]
} );
This is JSFiddle
. Any suggestions!
source to share
To display specific columns in flexible datatable, you just need to add to tables like below: Class Controls
th
<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 show column regardless of screen size.
class "none": Not displayed as a column, but displayed in a child row.
Here is a working demo of it.
source to share
It looks like you need this:
https://datatables.net/reference/option/columns.responsivePriority
"Column priority can also be determined by the data priority attribute in the column header cell (for example, Name)."
Mick
source to share