jquery - DataTable responsive display certain columns -
i using datatables along responsive , facing issues while trying display columns.
i need display 'column 1', 'column3', 'column 7', 'column 8', 'column 10'
, hide others( these should displayed expand control @ end of each row ).
js:
$( 'table' ).datatable( { order: [ [ 0, "asc" ] ], responsive: { details: { type: 'column', target: 'tr' } }, columndefs: [ { classname: 'control', orderable: false, targets: -1 } ] } );
this jsfiddle
. suggestions!
to show specific columns in responsive datatable, need add class controls
in th
of table, 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": display column irrespective of screen size.
class "none": don't display column, show in child row.
here working demo.
hope helps.
Comments
Post a Comment