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

我有一个datatable，有3列，其中两列在display none中。 我有一个复选框列表来对它们进行排序，但是当我尝试使用onclick on复选框对列进行排序时，代码中出现了一些错误，因为该列排序不正确 也许是因为它们没有展出？ 这是我的排序方法

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

下面是我的JSFIDLE示例

请尝试以下代码：

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

请尝试以下代码：

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

---

我已经更新了您的代码，在HTML输入中包含一个数据属性，这样下面的单击函数就可以隐藏和显示正确的表列。这也会取消选中其他复选框

var table=$（'#mytable'）.DataTable（）；
$（'input[type=“checkbox”]”）。单击（函数（）{
如果（$（this）.is（':checked'））{
var idx=$（this.data（'id'）；
//console.log（idx）；
//隐藏所有列（这可能会减少）
table.column（0）.visible（false）.draw（）；
table.column（1）.visible（false）.draw（）；
table.column（2）.visible（false）.draw（）；
//排序列并显示
$（'#mytable'）.DataTable（）.order（[idx，'desc']）.draw（）；
table.column（idx）.visible（true.draw（）；
//取消选中其他复选框
$（this）.sides（）.prop（“选中”，false）；
}否则{
//您可能想看看是否减少下面显示整个表格的部分
table.column（0）.visible（true）.draw（）；
table.column（1）.visible（true）.draw（）；
table.column（2）.visible（true）.draw（）；
}
});
table.dataTable{
宽度：100%！重要；
}

数据1

数据2

数据3

数据1
数据2
数据3
1.
6.
48
9
6.
54
45
8.
89
24
7.
543
45
8.
89
4.
54
7.
45
8.
89
87
564
4.
787
87
7.
45
8.
89
5.
45
55
2.
512
1.
41
884
54
14
5.
5458
我已更新您的代码，在HTML输入中包含数据属性，以便下面的单击功能可以隐藏和显示正确的表列。这也会取消选中其他复选框


var table=$（'#mytable'）.DataTable（）；
$（'input[type=“checkbox”]”）。单击（函数（）{
如果（$（this）.is（':checked'））{
var idx=$（this.data（'id'）；
//console.log（idx）；
//隐藏所有列（这可能会减少）
table.column（0）.visible（false）.draw（）；
table.column（1）.visible（false）.draw（）；
table.column（2）.visible（false）.draw（）；
//排序列并显示
$（'#mytable'）.DataTable（）.order（[idx，'desc']）.draw（）；
table.column（idx）.visible（true.draw（）；
//取消选中其他复选框
$（this）.sides（）.prop（“选中”，false）；
}否则{
//您可能想看看是否减少下面显示整个表格的部分
table.column（0）.visible（true）.draw（）；
table.column（1）.visible（true）.draw（）；
table.column（2）.visible（true）.draw（）；
}
});
table.dataTable{
宽度：100%！重要；
}

数据1

数据2

数据3

数据1
数据2
数据3
1.
6.
48
9
6.
54
45
8.
89
24
7.
543
45
8.
89
4.
54
7.
45
8.
89
87
564
4.
787
87
7.
45
8.
89
5.
45
55
2.
512
1.
41
884
54
14
5.
5458
如果选择更高的页面大小值，排序工作正常。@PriyankJ是的，但我需要保持分页。您不能以这种方式隐藏或显示列（至少在您希望DataTables工作的情况下）-隐藏显示列按
表。列（索引）。可见（真/假）。绘制（）
->如果选择更大的页面大小值，则排序正确。@PriyankJ是的，但我需要保持分页。您不能以这种方式隐藏或显示列（至少在您希望数据表正常工作的情况下）-隐藏显示列按
table.column（index）.visible（true/false）.draw（）
->没问题，很乐意帮忙，没问题，很乐意帮忙