Question

我终于能够弄清楚如何通过点击按钮重置过滤器，但现在我希望我的所有3个按钮彼此相邻。

我尝试调整dom，但我的Clear Filters和Reset Columns按钮不在dom中。我是否必须重新配置我的清除过滤器和重置列按钮的方式？

"dom": '<"top"i>rt<"bottom"flp><"clear">'

完整代码

<script>
                    $(document).ready(function() {

                        $('#everyonesTable tfoot th').each(function(i) {
                            var title = $('#everyonesTable thead th').eq($(this).index()).text();
                            $(this).html('<input type="text" style="color:white!important;" placeholder="' + title + '" data-index="' + i + '" />');
                        });

                        // DataTable
                        var table = $('#everyonesTable').DataTable({


                            colReorder:         true,
                            keys: true,
                            stateSave:          true,
                            "lengthMenu": [
                                [10],
                                [10]
                            ],

                            scrollX:            true,
                            scrollCollapse:     true,
                            paging:             true,
                            fixedColumns:       true,
                            dom: 'Bfrtip',

                            buttons: [{
                                "extend": 'colvis',
                                "collectionLayout": 'fixed four-column'

                            }],
                        });

                        new $.fn.dataTable.Buttons(table, {
                            buttons: [{
                                    text: 'Clear Filters',
                                    action: function(e, dt, node, config) {



                                        $("[data-index='1']").val('');
                                        $("[data-index='2']").val('');
                                        $("[data-index='3']").val('');
                                        $("[data-index='4']").val('');
                                        $("[data-index='5']").val('');
                                        $("[data-index='6']").val('');
                                        $("[data-index='7']").val('');
                                        $("[data-index='8']").val('');
                                        $("[data-index='9']").val('');
                                        $("[data-index='10']").val('');
                                        $("[data-index='11']").val('');
                                        $("[data-index='12']").val('');
                                        $("[data-index='13']").val('');
                                        $("[data-index='14']").val('');
                                        $("[data-index='15']").val('');
                                        $("[data-index='16']").val('');
                                        $("[data-index='17']").val('');
                                        $("[data-index='18']").val('');
                                        $("[data-index='19']").val('');
                                        $("[data-index='20']").val('');
                                        $("[data-index='21']").val('');
                                        $("[data-index='22']").val('');
                                        $("[data-index='23']").val('');
                                        $("[data-index='24']").val('');
                                        $("[data-index='25']").val('');
                                        $("[data-index='26']").val('');
                                        $("[data-index='27']").val('');
                                        $("[data-index='28']").val('');
                                        $("[data-index='29']").val('');
                                        $("[data-index='30']").val('');
                                        $("[data-index='31']").val('');
                                        $("[data-index='32']").val('');
                                        $("[data-index='33']").val('');
                                        $("[data-index='34']").val('');
                                        $("[data-index='35']").val('');
                                        $("[data-index='36']").val('');
                                        $("[data-index='37']").val('');
                                        $("[data-index='38']").val('');
                table.search('').columns().search('').draw();


                                    }
                                },
                                {
                                    text: 'Reset Columns',
                                    action: function(e, dt, node, config) {
                                        table.colReorder.reset();


                                    }
                                }
                            ]
                        });

                        table.buttons(1, null).container().appendTo(
                            table.table().container()
                        );



                                        columnDefs: [{
                                            targets: 1,
                                            render: function(data, type, row) {
                                                return type === 'display' && data.length > 5 ?
                                                    data.substr(0, 5) + '…' :
                                                    data;
                                            }
                                        }]



                                        $(table.table().container()).on('keyup', 'tfoot input', function() {
                                            table
                                                .column($(this).data('index'))
                                                .search(this.value)
                                                .draw();
                                        });




                 });
                </script>

Answer 1

您可以将所有按钮添加到单个Button实例，而不是两个单独构建的两种不同方式。为什么这样做呢？

如果这不是一个选项，请将第二个Button-instance添加到第一个：

table.buttons(1, null).container().appendTo($('.btn-group'))

就像现在一样，你只是追加＆＃34;构造函数＆＃34; Button-instance到dataTables容器的最后。

Jquery DataTables，移动按钮彼此相邻

1 个答案: