如何删除数据表分页按钮中的空格

Question

您能帮我找到一种方法来删除数据表分页按钮中的空格吗？

为此，我引用了以下URL：

DATA TABLES BOOTSTRAP 4 EXAMPLE

我已经完全按照上面的说明添加了.js和CSS文件，但是没有用。

Datatables pagination buttons - Remove unwanted space

以上所有方法均无效。请帮助我重写当前功能。谢谢。

请在下面找到我工作过的代码：

HTML

  <!-- BOOTSTRAP -->
  <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
  <script src="javascript/third_party/popper.min.js"></script>
  <script src="javascript/third_party/bootstrap.min.js"></script>


  <!-- DATA TABLES -->
  <link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css" />
  <script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
  <script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>

CSS

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding : 0px;
  margin-left: 0px;
  display: inline;
  border: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border: 0px;
}

jQuery

$.fn.dataTable.moment('MM/DD/YYYY');
  $(`#${ID}`).DataTable({
    columnDefs: [{
      targets: [0, 1, 2, 5, 6, 7],
      orderable: false
    }],
    "order": [[4, "asc"]]
  });

Answer 1

经过大量研究，我发现

在使用引导CSS时，请勿同时使用jquery.dataTables.css。否则会在分页中产生间距问题。

Bootstrap Datatable 4可以独立运行，如您在我创建的JsBin中所看到的。

希望，如果您指向 poper.js 的正确网址，如下所示： 否则，这也会导致Bootstrap 4 CSS出现问题。

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

编辑：
如果您在codepen下方看到与您同样面临的问题。

如果您打开该Codepen，并删除以下行，则对您来说很好。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10-dev/css/jquery.dataTables.css">

希望这可能对您有用。如果没有，请在下面注释。