使用 Bootstrap Angular 6 数据表的分页样式页脚

Posted 2023-03-06

【中文标题】使用 Bootstrap Angular 6 数据表的分页样式页脚

【英文标题】：Style tfooter with pagination using Bootstrap Angular6 Datatable

【发布时间】：2019-01-23 09:37:41

【问题描述】：

我使用 Angular 6 数据表对表中的数据进行分页。

https://www.npmjs.com/package/angular-6-datatable

一切正常，但我无法处理 mfBootstrapPaginator 页脚中的样式

如您所见，这些项目不在一行中。如何将它们设置在一行或至少彼此相邻？

<div class="table-responsive">
  <table id="tablePreview" class="table table-hover table-bordered" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
    <thead>
      <tr>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of mf.data; let i = index;">
        <td></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <!-- I got 8 columns in my project -->
        <td colspan="8">
          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25, 50, 100]"></mfBootstrapPaginator>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

我使用 Angular 6，Bootstrap 4

【问题讨论】：

如果可能的话，您能否制作一个 StackBlitz 并将您的代码放入其中，以便我们进一步帮助您

我也是同样的问题...你解决了吗？ @davecar21

@cwiq 你解决了吗？

尝试将您的代码放入http://plnkr.co 或https://stackblitz.com

@Doflamingo19 不，我没有。我刚换了整张桌子。我选择了材料一。

【参考方案1】：

改变分页类的显示：

.pagination 
   display: inline-flex !important;

【参考方案2】：

我现在，这个问题比较老，但也许它可以帮助某人。我是这样写的：

<style>
  ul.pagination display: inline-flex !important;
  .pagination li.active .page-link background-color: rgb(54,61,71) !important; border-color: rgb(54,61,71) !important;
</style>

在我的 index.html 中的 head close 标签之前，它对我有用。我希望它可以帮助某人。