Question

我有一个包含3列的数据表，其中两个都没有显示。我有一个复选框列表来对它们进行排序，但是当我尝试使用onclick复选框对列进行排序时，我的代码中有错误，该列未正确排序也许是因为它们没有显示？这是我的排序方法

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

这是我的示例jsfiddle

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

Answer 1

尝试以下代码：

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();
});

Answer 2

我已经更新了您的代码，以在HTML输入上包括data属性，以便下面的click函数可以隐藏和显示正确的表格列。这也会取消选中其他复选框。

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>

希望这会有所帮助

对隐藏的列数据表进行排序

2 个答案: