CODEWITHSUNDEEP
jqueryarraysdatatabledatatables
LuR
LuR

Reputation: 253

Sort hidden column datatable

I have a datatable with 3 columns two of them are in display none. I have a list of checkbox to sort them but something is wrong in my code when I try to sort a column with onclick on checkbox the column is not sort correctly Maybe because they are in display none ? This is my method to sort 

$('#f_data_2').click(function(){
  $('.p1').css('display','none');
  $('.p2').css('display','block');
  $('.p3').css('display','none');
  $('#mytable').DataTable().order([1, 'desc']).draw(); 
});

Here is my example jsfiddle

http://jsfiddle.net/3ska97xm/18/

Upvotes: 0

Views: 1205

Answers (2)

DesignMonkeyJim
DesignMonkeyJim

Reputation: 1935

I have update your code to include a data attribute on the HTML inputs so that the click function below can hide and show the correct table columns. This also unticks the other checkboxes. 

var table = $('#mytable').DataTable();

$('input[type="checkbox"]').click(function(){
    if($(this).is(':checked')) {
		var idx = $(this).data('id');
        //console.log(idx); 
        // hide all columns (this might be able to be reduced)
        table.column(0).visible(false).draw();  
        table.column(1).visible(false).draw();
        table.column(2).visible(false).draw();

        //order column and show
  	$('#mytable').DataTable().order([idx, 'desc']).draw(); 
 	table.column(idx).visible(true).draw();
        // untick other checkboxes
        $(this).siblings().prop( "checked", false );

    } else {
    
    // might want to see if you reduce this part below that shows the whole table again
  	table.column(0).visible(true).draw();  
        table.column(1).visible(true).draw();
        table.column(2).visible(true).draw();        
   }
});
table.dataTable {
    width: 100%!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>

<input type='checkbox' data-id='0' id='f_data_1' name='p_cat'>Data 1 <br />
<input type='checkbox' data-id='1' id='f_data_2' name='p_cat'>Data 2 <br />
<input type='checkbox' data-id='2' id='f_data_3' name='p_cat'>Data 3 <br />


<table id='mytable'>
<thead>
  <tr>
    <th class='p1'>data 1</th>
    <th class='p2'>data 2</th>
    <th class='p3'>data 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class='p1'>1</td>
    <td class='p2'>6</td>
    <td class='p3'>48</td>
  </tr>
  <tr>
    <td class='p1'>9</td>
    <td class='p2'>6</td>
    <td class='p3'>54</td>
  </tr>
  <tr>
    <td class='p1'>45</td>
    <td class='p2'>8</td>
    <td class='p3'>89</td>
  </tr>
    <tr>
    <td class='p1'>24</td>
    <td class='p2'>7</td>
    <td class='p3'>543</td>
  </tr>
    <tr>
    <td class='p1'>45</td>
    <td class='p2'>8</td>
    <td class='p3'>89</td>
  </tr>
    <tr>
    <td class='p1'>4</td>
    <td class='p2'>54</td>
    <td class='p3'>7</td>
  </tr>
  <tr>
    <td class='p1'>45</td>
    <td class='p2'>8</td>
    <td class='p3'>89</td>
  </tr>
    <tr>
    <td class='p1'>87</td>
    <td class='p2'>564</td>
    <td class='p3'>4</td>
  </tr>
    <tr>
    <td class='p1'>787</td>
    <td class='p2'>87</td>
    <td class='p3'>7</td>
  </tr>
    <tr>
    <td class='p1'>45</td>
    <td class='p2'>8</td>
    <td class='p3'>89</td>
  </tr>  <tr>
    <td class='p1'>5</td>
    <td class='p2'>45</td>
    <td class='p3'>55</td>
  </tr>  <tr>
    <td class='p1'>2</td>
    <td class='p2'>512</td>
    <td class='p3'>1</td>
  </tr>  <tr>
    <td class='p1'>41</td>
    <td class='p2'>884</td>
    <td class='p3'>54</td>
  </tr>  <tr>
    <td class='p1'>14</td>
    <td class='p2'>5</td>
    <td class='p3'>5458</td>
  </tr>
  
</tbody>
</table>

Hope this helps

Upvotes: 1

Ray A
Ray A

Reputation: 1351

Try this code:

var table = $('#mytable').DataTable();

table.column(0).visible(true).draw();
table.column(1).visible(false);
 table.column(2).visible(false);

$('#f_data_1').click(function(){
  table.column(1).visible(false);
  table.column(2).visible(false);

  $('#mytable').DataTable().order([0, 'desc']).draw(); 
  table.column(0).visible(true).draw();

});

$('#f_data_2').click(function(){
table.column(0).visible(false);
  table.column(2).visible(false);

  $('#mytable').DataTable().order([1, 'desc']).draw(); 
  table.column(1).visible(true).draw();
});


$('#f_data_3').click(function(){
  table.column(0).visible(false);
  table.column(1).visible(false);
  $('#mytable').DataTable().order([2, 'desc']).draw(); 
  table.column(2).visible(true).draw();
});

Upvotes: 1

Related Questions