首页 > 解决方案 > 如何在我的项目中包含 Bootstrap 3 和 JQuery 数据表?

问题描述

我有一个关于在我的项目中包含库的问题。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 ,关于应该包含什么的信息很少。此外,没有关于如何包含我在代码中使用的按钮的示例。如果有人知道如何实现这些库或者我的代码需要一些调整,请告诉我。谢谢你。

标签: jquerytwitter-bootstraptwitter-bootstrap-3datatableslibraries

解决方案


你可以像这样包含

另请参阅此链接Datatable Github

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css">

<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.bootstrap.js"></script>

<script type="text/javascript" charset="utf-8">
                $(document).ready(function() {
                    $('#example').DataTable();
                } );
            </script>

推荐阅读