使用 DataTables 引導分頁-sm

Question

我想讓我的 Datatables 分頁樣式類似於 Bootstrap 分頁。

所以，目前它看起來像這樣：

如果我添加

<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap.min.js"></script>

它看起來像這樣：

我希望它看起來像這樣：

我不知道為什么額外的 js 文件會導致按鈕之間的距離。

我真的很感激任何幫助！

Answer 1

你能檢查下面的代碼鏈接嗎？ 希望它對你有用。 we have added jQuery , jquery.dataTable.js , and jquery.dataTables.min.css as per Data table documentation ( https://datatables.net/examples/basic_init/alt_pagination.html ).

我們已根據您所需的設計應用樣式，並從分頁按鈕中刪除邊距，如下所示。

.dataTables_wrapper .dataTables_paginate a.paginate_button {
  margin: 0px;
}

請參考此鏈接： https://jsfiddle.net/yudizsolutions/360sefnL/2/

Answer 2

您可能忘記包含 CSS 庫文件。 您能否檢查並在您的代碼中添加下面的 CSS 鏈接。

加載了以下 CSS 庫文件以在此示例中使用，以提供表格的樣式：

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css

請按照給定的鏈接查看 CSS 選項卡信息。

https://datatables.net/examples/styling/bootstrap4