Datatables 数据表的单下拉筛选

我已经挣扎了几天了，试图用一个下拉列表来过滤我的表格。选择eraId后，应刷新列以仅显示所选eraId的列

这就是我的桌子的样子：

我在Datatables网站或论坛上读过很多例子，但似乎找不到有效的方法

我已经设法创建了一个包含不同eraid的下拉菜单作为过滤器。我简化了下面的示例，仅使用了3个eraid，但在下拉菜单中选择一个条目后，表变为空，列列表不会刷新

我认为问题在于，我首先根据eraId检索列名，然后相应地绘制表，只显示特定eraId中的资源。我试过几件事，但都没有成功

理想情况下，我应该使用选定的eraId回调getPlayerResourceTable，或者使用选定eraId上的资源更新列列表

Javascript:

var columns = [];
function getPlayerResourceTable($selectedEraId) {
    $.ajax({
        type: "POST",
        url: "./graphs.php",
        data: { call_function : 'getResourceTableColumns', eraId: $selectedEraId},
        success: function (data) {
            data = JSON.parse(data);
            columnNames = Object.keys(data.data);
            
            for (var i in data.data) {
              columns.push({data: data.data[i], 
                        title: data.data[i]});
            }
            
            $('#playerResourceTable').DataTable( {
                processing: true,
                serverSide: false,
                filter: true,
                columns: columns,
                ajax: {
                    url: './graphs.php',
                    type: 'POST',
                    data: { call_function: 'playerResourceTable', colummn_fields : data.data, eraId: $selectedEraId}
                },
        
                initComplete: function () {
                    this.api().columns( 0 ).every( function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $("#playerResourceTablesWrapper .dataTables_filter"))
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
          
                                column.search( this.value ).draw();
                            } );
          
                            select.append( '<option value="1">Era 1</option>' )
                            select.append( '<option value="2">Era 2</option>' )
                            select.append( '<option value="3">Era 3</option>' )
                    } );
                }
            });
        }
    });
}

$(document).ready(function() {
  
  $selectedEraId = 1;
  getPlayerResourceTable($selectedEraId);

} );

PHP: getResourceTableColumns返回列列表，其查询类似于SelectColumnName fromAges，其中eraId=

playerResourceTable返回查询类似于SELECT.$field\u list的每种资源列类型的资源。来自用户资源

---

我还考虑删除eraId=？在我的MySQL查询中，在客户端过滤列，但也没有运气。

我最终将这两个函数分离，并在更改Era时销毁/重新创建表

function getColumns($selectedEraId) {
    var columns = [];
    $.ajax({
        type: "POST",
        url: "./graphs.php",
        data: { call_function : 'getResourceTableColumns', eraId: $selectedEraId},
        success: function (data) {
            data = JSON.parse(data);
            
            for (var i in data.data) {
              columns.push({data: data.data[i], 
                        title: data.data[i]});
            }
            
            if ( $.fn.dataTable.isDataTable( '#playerResourceTable' ) ) {   // If the table already exists, detroy it before creating it again
                $('#playerResourceTable').DataTable().destroy();
            }
            getPlayerResourceTable($selectedEraId, columns);    // Will recreate the table with the new columns
        }
    });
}
    
    
function getPlayerResourceTable($selectedEraId, columns_to_show) {
    $city_id = 91;
    $playerResourceTable = $('#playerResourceTable').DataTable( {
        processing: true,
        serverSide: false,
        filter: true,
        columns: columns_to_show,
        ajax: {
            url: './graphs.php',
            type: 'POST',
            data: { call_function: 'playerResourceTable', colummn_fields : columns_to_show, city_id : parseInt($city_id)}
        },

        initComplete: function () {
            this.api().columns( 0 ).every( function () {
                var column = this;
                
                var select = $('<select id="selectEraId" ><option value=""></option></select>')
                    .appendTo( $("#playerResourceTablesWrapper .dataTables_filter"))
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column.search( this.value ).draw();
                    } );
                    
                    dropdown_string = getEraDropdown($selectedEraId);
            } );
            
            $('#selectEraId').on('change', function() {
              $selectedEraId = this.value;
              columns_to_show = getColumns($selectedEraId);
            });
        }
    });
}

更改下拉列表时，未将选定的$selectedRAID传递给PHP。