jquery - 如何在我的项目中包含 Bootstrap 3 和 JQuery Datatables？

Question

我对在我的项目中包含库有疑问。 Bootstrap 3 是我的项目中使用的第一个库。另外，我需要 JQuery 数据表。我想知道他们在我的项目中实现的代码和方式是否正确或者我需要调整。这是我当前主页的示例，其中包含库:

主页

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- *** Start: JS for DataTables. *** -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<!-- *** End: JS for DataTables. *** --> 

然后我找到了这个例子:https://datatables.net/examples/styling/bootstrap并且关于应包含哪些内容的信息非常少。另外，没有关于如何包含我在代码中使用的按钮的示例。如果有人知道如何实现这些库的方法或者我的代码需要一些调整，请告诉我。谢谢。

Answer 1

包含 Datatables 源(带有按钮扩展)以便将其与 Bootstrap 集成的正确顺序如下:

在头部(样式来源):

<!-- Bootstrap CSS-->
<link rel="stylesheet" type="text/css" href="<path>/bootstrap.min.css"/>

<!-- Datatables CSS -->
<link rel="stylesheet" type="text/css" href="<path>/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="<path>/buttons.bootstrap.min.css"/>

在正文上(脚本来源):

<!-- jQuery JS -->
<script type="text/javascript" src="<path>/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script type="text/javascript" src="<path>/bootstrap.min.js"></script>

<!-- DataTables JS -->
<script type="text/javascript" src="<path>/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<path>/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="<path>/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="<path>/buttons.bootstrap.min.js"></script>
<script type="text/javascript" src="<path>/jszip.min.js"></script>
<script type="text/javascript" src="<path>/pdfmake.min.js"></script>
<script type="text/javascript" src="<path>/vfs_fonts.js"></script>
<script type="text/javascript" src="<path>/buttons.html5.min.js"></script>
<script type="text/javascript" src="<path>/buttons.flash.min.js"></script>
<script type="text/javascript" src="<path>/buttons.print.min.js"></script>
<script type="text/javascript" src="<path>/buttons.colVis.min.js"></script>

请注意<path>应替换为库的完整路径。就我而言，我在本地拥有所有内容，但您也可以使用 CDN 存储库。

此外，请记住，仅当您正确配置 dom 时，按钮才会显示。初始化步骤中数据表的选项。我当前的 dom 配置是这样的(我在其中删除了 l :长度更改控件):

dom = "< 'row' <'box-header' <'col-sm-6' B> <'col-sm-6' f> > >" +
      "< 'row' <'col-sm-12' tr> >" +
      "< 'row' <'col-sm-5' i> <'col-sm-7' p> >";

您可以在站点文档上阅读更多信息:Datatables dom

或者关于我之前做过的下一个解释:Customization of Display Format for Datatables Plugin in Boostrap 3