jquery - DataTable responsive display certain columns -


i using datatables along responsive , facing issues while trying display columns.

table layout this: enter image description here

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

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -