带有 Bootstrap 4 的 AngularJS 数据表 - 格式问题答案

【问题标题】：AngularJS Datatables with Bootstrap 4 - Formatting issues带有 Bootstrap 4 的 AngularJS 数据表 - 格式问题
【发布时间】：2020-10-13 03:20:33
【问题描述】：

我似乎找不到使用 Bootstrap 4 纠正 AngularJS 数据表样式问题的简单解决方法。除了分页和搜索（显示在左侧）之外，所有格式都正确：

有没有人知道将这些元素推回 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 有关）但我无法找到正确的组合来正确设置它的样式。

【问题讨论】：

好的，我在 angular-datatables.bootstrap.js 文件中找到了影响样式的罪魁祸首：(1) 'sWrapper': 'dataTables_wrapper form-inline' 应该只是 'sWrapper': 'dataTables_wrapper' 和 (2) dom: '<\'row\'<\'col-xs-6\'l><\'col-xs-6\'f>r>t<\'row\'<\'col-xs-6\'i><\'col-xs-6\'p>>' 应该有 @ 987654333@ 值更改为 col-sm-6。这使得样式可以正常工作并且所有格式都很好，直到您按下后退按钮并且由于某种原因，DOM 从数据表中删除。这意味着不再有rows 和col-sm-6。

标签： angularjs bootstrap-4 datatables angular-datatables

【解决方案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' )

【讨论】：