DataTables表中只显示一个搜索窗格

我正在尝试编写一个页面,该页面将在Datatables对象中显示所提供的csv文件。 它没有抛出任何错误,但目前只将“性别”列显示为搜索窗格。我希望所有的选项都是可搜索的。

这是我的csv文件:

姓名、年龄、性别、城市、国家
John Doe,30岁,男,美国纽约
Jane Smith,25岁,女,美国旧金山
Bob Johnson,45岁,男,加拿大多伦多
Alice Lee,35岁,女,澳大利亚悉尼

这是我的index.html

<!DOCTYPE html>
<html>
<head>
<title>Rules</title>
<link rel="stylesheet" type="text/css" href=https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css>
<link rel="stylesheet" type="text/css" href=https://cdn.datatables.net/searchpanes/2.1.1/css/searchPanes.dataTables.min.css>

<script type="text/javascript" src=https://code.jquery.com/jquery-3.6.0.min.js></script>
<script type="text/javascript" src=https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js></script>
<script type="text/javascript" src=https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js></script>
<script type="text/javascript" src=https://cdn.datatables.net/searchpanes/2.1.1/js/dataTables.searchPanes.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js></script>

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            url: "results.csv",
            dataType: "text",
            success: function(data) {
                var parsedData = Papa.parse(data, { header: true }).data;
                console.log($.fn.dataTable.SearchPanes);
                var table = $('#example').DataTable({
                    data: parsedData,
                    columns: [
                        { data: "name", searchable: true },
                        { data: "age", searchable: true },
                        { data: "gender", searchable: true },
                        { data: "city", searchable: true },
                        { data: "country", searchable: true }
                    ],
                    select: true,
                    dom: 'Pfrtip',
                    searchPanes: {
                        viewTotal: true,
                        layout: 'columns-3',
                        columns: [0,1,2,3,4]
                    },
                    buttons: [
                        'searchPanes'
                    ],
                    stateSave: true
                });
                var searchPanes = table.searchPanes();
                console.log(searchPanes);
            }
        });
    });
</script>
</head>
<body>
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
            <th>City</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</body>
</html>