Jquery，如何在数据表中的表格上添加多个按钮？

Question

我有这张桌子，我想自定义桌子上的按钮

从左边开始，我想添加日期（从）、日期（到）、下拉菜单、搜索栏、搜索触发器

我尝试查找文档和博客，但找不到与此相关的任何内容。

有人可以帮忙吗？这是表格代码

const errorTable = $('#load-error-log').dataTable({
    processing: true,
    serverSide: true,
    orderMulti: false,
    order: [],
    aLengthMenu: [20, 50, 100, 200],
    aoColumnDefs: [{
        bSortable: false,
        aTargets: ['nosort']
    }],
    dom: '<"pull-left"l><"pull-right"f>tip',
    language: {
        search: "",
        searchPlaceholder: "Search"
    },
    ajax: {
        type: 'post',
        url: '/error-page/load-data',
        contentType: "application/json",
        data: function (d) {
            return JSON.stringify($.extend({}, d, {}));
        }
    },
});

Answer 1

您可以查看此（https://datatables.net/extensions/searchpanes/examples/customFiltering/customOptionConditions.html）文档。

你可以使用这样的代码；

    var dt = new DataTable('#example', {
    columnDefs: [
        {
            orderable: false,
            render: DataTable.render.select(),
            searchPanes: {
                show: true,
                options: [
                    {
                        label: 'Checked',
                        value: function (rowData, rowIdx) {
                            return this.row(rowIdx, { selected: true }).any();
                        }
                    },
                    {
                        label: 'Un-Checked',
                        value: function (rowData, rowIdx) {
                            return this.row(rowIdx, { selected: true }).any() === false;
                        }
                    }
                ]
            },
            targets: [0]
        },
        {
            searchPanes: {
                options: [
                    {
                        label: 'Under 20',
                        value: function (rowData, rowIdx) {
                            return rowData[4] < 20;
                        }
                    },
                    {
                        label: '20 to 30',
                        value: function (rowData, rowIdx) {
                            return rowData[4] <= 30 && rowData[4] >= 20;
                        }
                    },
                    {
                        label: '30 to 40',
                        value: function (rowData, rowIdx) {
                            return rowData[4] <= 40 && rowData[4] >= 30;
                        }
                    },
                    {
                        label: '40 to 50',
                        value: function (rowData, rowIdx) {
                            return rowData[4] <= 50 && rowData[4] >= 40;
                        }
                    },
                    {
                        label: '50 to 60',
                        value: function (rowData, rowIdx) {
                            return rowData[4] <= 60 && rowData[4] >= 50;
                        }
                    },
                    {
                        label: 'Over 60',
                        value: function (rowData, rowIdx) {
                            return rowData[4] > 60;
                        }
                    }
                ]
            },
            targets: [4]
        },
        {
            searchPanes: {
                options: [
                    {
                        label: 'Not Edinburgh',
                        value: function (rowData, rowIdx) {
                            return rowData[3] !== 'Edinburgh';
                        }
                    },
                    {
                        label: 'Not London',
                        value: function (rowData, rowIdx) {
                            return rowData[3] !== 'London';
                        }
                    }
                ],
                combiner: 'and'
            },
            targets: [3]
        }
    ],
    layout: {
        top1: {
            searchPanes: {
                viewTotal: true,
                columns: [0, 3, 4]
            }
        }
    },
    select: {
        style: 'os',
        selector: 'td:first-child'
    },
    order: [[1, 'asc']]
});
 
dt.on('select.dt', () => {
    dt.searchPanes.rebuildPane(0, true);
});
 
dt.on('deselect.dt', () => {
    dt.searchPanes.rebuildPane(0, true);
});