jQuery Datatables自定义DOM [英] jQuery Datatables customize DOM

问题描述

我有这个表格：

$(document).ready(function() {
        $('#example').DataTable({
            dom: 'Bfrtilp',
            responsive: true,
            "order": [[ 1, "desc" ]],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Alle"]],
            buttons: [
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                        columns: [ 0, ':visible' ]
                    }
                },
                {
                    extend: 'excelHtml5',
                    title: 'Events export'
                },
                {
                    extend: 'pdfHtml5',
                    title: 'Events export'

                },
                'colvis'
            ],
            "language": {"url": "/vendor/datatables/german.json"}
        });
    });

它看起来像这样：

，问题是按钮与搜索字段不一致，分页不与lengthMenu字段内联。

and the problem is that the buttons are not inline with search field and pagination is not inline with "lengthMenu" field.

我想要这样：

我如何编辑这些函数的输出....所以他们排列很好？

How can i edit the output for these functions....so they are lined up nicely?

推荐答案

将其添加到头部。 .btn-group {margin-bottom：-45px; z-index：2;}

Add this to the head. .btn-group { margin-bottom: -45px;z-index: 2;}

这篇关于jQuery Datatables自定义DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！