在

Question

我有一个特定的设计问题，我有一个th在第一个firstname中有两个过滤器，surname和th。

1 - 如何在第一个tr内禁用默认触发器，并将我的触发器添加到firstname和surname？

2 - 我为姓th添加了隐藏的第二个td.hidden A1，因为它不应该存在于布局中，但需要进行过滤

第一行始终显示Firstname和Surname： td Mr Y A1

.simple-table.highlight-header
    table.js-table-sort(data-table)
        thead
            tr
                th(data-title-first-surname)
                    .simple-table-toggle-legend(data-firstname-trigger) First name
                    .simple-table-toggles
                        .icon.icon-toggle-up
                        .icon.icon-toggle-down

                    .simple-table-toggle-legend(data-surname-trigger) Surname
                    .simple-table-toggles
                        .icon.icon-toggle-up
                        .icon.icon-toggle-down
                th.hidden Surname
        tbody
            tr
                td Mr Y A1
                td.hidden A1
            tr
                td Mr X A3
                td.hidden A3
            tr
                td Mr Max A2
                td.hidden A2

Answer 1

我不确定我理解你的意思，但我认为this应该做你需要的：

var forenames=[],surnames=[];
var table = $('#example').DataTable({
    "columns": [
        null, 
        {
            "render": function(data, type, row) {
                var names = data.split(" ");
                ~forenames.indexOf(names[0]) || forenames.push(names[0]);
                ~surnames.indexOf(names[1]) || surnames.push(names[1]);
                return data;
            },
            "sortable": false

        },
        null
    ],
    "initComplete": function() {
        var $forenames = $("#forename"),$surnames = $("#surname");
        forenames.forEach(function(x){
            $forenames.append($("<option></option>",{
                "value":x,
                "text":x
            }));
        });
        surnames.forEach(function(x){
            $surnames.append($("<option></option>",{
                "value":x,
                "text":x
            }));
        });
        $forenames.on("change", function(){
            table.columns(1).search($(this).val() + " " + $surnames.val()).draw();
        });
        $surnames.on("change", function(){
            table.columns(1).search($forenames.val() + " " + $(this).val()).draw();
        });        
    }
});

如果我们使用唯一的前导名和姓氏填充几个数组，那么我们可以创建一些带有名称的选择框，并在值更改时对这些数组进行搜索。我们还可以将sortable设置为false以在单击标题单元格时停止表排序。希望有所帮助。