Javascript 如何在使用jQuery DataTables将列重新排序到另一个位置后过滤该列？

我正在使用和应用。所以在表尾，每列上都有一个select来过滤数据

我实现了一个扩展，它使您能够通过点击和拖动操作对数据表中的列重新排序

它工作正常，但当我在示例中拖动一列，比如说“Office”，并将其作为第一列放置，然后我选择一个选项，例如“London”，我会得到“无匹配结果”

原因是：在重新排序之前，搜索仍在使用初始列索引。所以它基本上是在“名称”列中搜索“伦敦”，因为它是重新排序之前的第一列

我找到了一些关于如何应用列过滤和列重新排序的线程，但无法使其工作

我使用了

column.index（'visible'）.search（val？val:''，true，false）.draw（）

也

但没有任何结果。请问有什么建议我做错了什么？多谢各位


$（文档）.ready（函数（）{
变量表=$（“#示例”）。数据表（{
“colReorder”：{realtime:false}，
initComplete:函数（）{
this.api（）.columns（）.every（函数（）{
//对于每一列，我将引导选择器添加到页脚
var列=此；
变量选择=$（“”）
.appendTo（$（column.footer（））.empty（））
.on（'change'，函数（）{
//每次选项更改时，我都会加入所选选项，因为我的选择是多个，并在该列中搜索这些值并绘制数据表
var data=$（this.val（）；
如果（data.length==0）{data=[“”]；}
var val=data.join（“|”）；
控制台日志（val）；
search（val？val:“”，true，false）.draw（）；}）；
//在这里，我获得当前列的唯一值，并将它们作为选项附加到select中
column.data（）.unique（）.sort（）.each（函数（d，j）{
select.append（“”+d+“”）}）；
//在我的选择上应用引导选择器
$（“select”）.selectpicker（{dropupAuto:false}）；
} );
}
} );
} );    

名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
佐藤航空
会计
东京
33
2008/11/28
$162,700
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
赫罗德·钱德勒
营业员
旧金山
59
2012/08/06
$137,500
罗娜·戴维森
集成专家
东京
55
2010/10/14
$327,900
科琳赫斯特
Javascript开发人员
旧金山
39
2009/09/15
$205,500
索尼娅·弗罗斯特
软件工程师
爱丁堡
23
2008/12/13
$103,600
杰娜·盖恩斯
办公室经理
伦敦
30
2008/12/19
$90,560
奎因·弗林
支撑导线
爱丁堡
22
2013/03/03
$342,000
查尔德·马歇尔
区域主任
旧金山
36
2008/10/16
$470,600
海莉·肯尼迪
高级市场设计师
伦敦
43
2012/12/18
$313,500
塔蒂亚娜·菲茨帕特里克
区域主任
伦敦
19
2010/03/17
$385,750
迈克尔·席尔瓦
营销设计师
伦敦
66
2012/11/27
$198,500
柏德
首席财务官（CFO）
纽约
64
2010/06/09
$725,000
格洛丽亚·利特尔
系统管理员
纽约
59
2009/04/10
$237,500
布拉德利·格里尔
软件工程师
伦敦
41
2012/10/13
$132,000
戴里奥斯
人事领导
爱丁堡
35
2012/09/26
$217,500
var column = this;
var columnIndex = column.index();
table.column( columnIndex+':visible' ).search( val ? val : '', true, false ).draw();

  // This section tracks the location of each column as it is
  // reordered. the colIndexes array holds the original column
  // index values in the order in which they are now displayed:
  var colCount = 6;
  // start a with [0...n] array, where n is the number of columns:
  var colIndexes = [...Array(colCount).keys()]; 
  // see https://datatables.net/reference/event/column-reorder
  table.on( 'column-reorder', function ( e, settings, details ) {
    var curr = details.mapping;
    var temp =  new Array(colCount);
    for ( var i = 0; i < curr.length ; i++ ) {
      // This uses the change event to determine the impact on the
      // original column ordering. 
      temp[curr[i]] = colIndexes[i];
    }
    colIndexes = temp;
    console.log("idx  : " + colIndexes);
  } );

var dtApi = this.api();

var currentColIdx = colIndexes[column.index()];
var dataColumn = dtApi.columns(currentColIdx);

dataColumn.search( val ? val : '', true, false ).draw(); } );

<script type="text/javascript">

$(document).ready(function() {

  var table = $('#example').DataTable( {

    //colReorder: true,
    "colReorder": { realtime: false },

    initComplete: function () {

      var dtApi = this.api();

      this.api().columns().every( function () {
        //for each column I add bootstrap selectpicker to the footer
        var column = this;
        var select = $('<select class="form-control show-tick dropup" data-dropup-auto="false" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple><option value=""></option></select>')
            .appendTo( $(column.footer()).empty() )
            .on( 'change', function () { 
        //everytime the options change I join the selected options as my select is multiple and search those values in that column and draw my DataTable
        var data =  $(this).val() ;
        if (data.length === 0) { data = [""]; }
        var val = data.join('|');

        var currentColIdx = colIndexes[column.index()];
        //console.log(val);
        //console.log(column.data());
        
        var colValues = dtApi.columns(currentColIdx).data()[0];
        var dataColumn = dtApi.columns(currentColIdx);
        console.log(dataColumn);
        console.log(colValues);

        dataColumn.search( val ? val : '', true, false ).draw(); } );
        //Here I get unique values of current column and append them as options inside my select
        column.data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' ) } );
        //apply bootstrap selectpicker on my select
        $("select").selectpicker({ dropupAuto: false });
      } );

    }

  } );

  // This section tracks the location of each column as it is
  // reordered. the colIndexes array holds the original column
  // index values in the order in which they are now displayed:
  var colCount = 6;
  // start a with [0...n] array, where n is the number of columns:
  var colIndexes = [...Array(colCount).keys()]; 
  // see https://datatables.net/reference/event/column-reorder
  table.on( 'column-reorder', function ( e, settings, details ) {
    var curr = details.mapping;
    var temp =  new Array(colCount);
    for ( var i = 0; i < curr.length ; i++ ) {
      // This uses the change event to determine the impact on the
      // original column ordering. 
      temp[curr[i]] = colIndexes[i];
    }
    colIndexes = temp;
    console.log("idx  : " + colIndexes);
  } );
        
} );   

</script>