datatables - 数据表的单个下拉过滤

问题描述

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

这就是我的表格的样子：

我在 Datatables 网站或论坛上阅读了很多示例，但我似乎找不到有用的东西。

我设法创建了一个下拉菜单，其中包含不同的 EraIds 作为过滤器（我已经简化了下面的示例，只有 3 个 eraIds），但是在下拉菜单中选择一个条目后，表格变空并且列列表没有刷新。

我认为问题在于我首先根据检索列名称，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', column_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返回与查询类似的列列表SELECT columnName FROM ages WHERE eraId = ?

playerResourceTable返回每列（资源类型）的资源，查询类似于SELECT ".$field_list." FROM user_resources

我还想过在我的 MySQL 查询中删除WHERE eraId = ?并过滤客户端的列，但也没有运气。

标签： datatables

我最终在更改 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', column_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);
            });
        }
    });
}

datatables - 数据表的单个下拉过滤

问题描述

解决方案

推荐阅读