AngularJS 具有 Bootstrap 4 的数据表 - 格式问题

Question

我似乎找不到使用 Bootstrap 纠正 AngularJS 数据表样式问题的简单修复方法 4. 除分页和搜索（出现在左侧）外，所有格式均正确边):

有谁知道将这些元素推回 RHS 的修复方法吗？我已经尝试添加自定义 DOM 样式但无济于事（所以我现在只是保持标准）

.withDOM( 'lfrtip' )
.withBootstrap()

我还包含了 Bootstrap 4 .js 文件：

<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>

我知道它与 DOM 样式有关（我假设与 flex 有关）但我无法找到正确的组合来正确设置样式。

Answer 1

好的，对于使用 AngularJS Datatables 和 Bootstrap 4 时遇到相同格式问题的任何人，这就是我为解决此问题所做的工作：

修改了 angular-datatables.bootstrap.js 文件：

function _overrideClasses() {
    /* Default class modification */
    $.extend($.fn.dataTableExt.oStdClasses, {
        'sWrapper': 'dataTables_wrapper form-inline',
        'sFilterInput': 'form-control input-sm',
        'sLengthSelect': 'form-control input-sm',
        'sFilter': 'dataTables_filter',
        'sLength': 'dataTables_length'
    });

为此：

function _overrideClasses() {
    /* Default class modification */
    $.extend($.fn.dataTableExt.oStdClasses, {
        'sWrapper': 'dataTables_wrapper',   // Removed the form-inline
        'sFilterInput': 'form-control input-sm',
        'sLengthSelect': 'form-control input-sm',
        'sFilter': 'dataTables_filter',
        'sLength': 'dataTables_length'
    });

然后修改了我所有的数据表.withDOM()：

.withDOM( 'lfrtip' )
.withBootstrap()
.withPaginationType( 'full_numbers' )

为此：

.withDOM( '<\'row\'<\'col-sm-6\'l><\'col-sm-6\'f>r>t<\'row\'<\'col-sm-6\'i><\'col-sm-6\'p>>' )
.withBootstrap()
.withPaginationType( 'full_numbers' )

AngularJS 具有 Bootstrap 4 的数据表 - 格式问题

AngularJS Datatables with Bootstrap 4 - Formatting issues

datatables

angularjs

angular-datatables

bootstrap-4