如何在我的项目中包含 Bootstrap 3 和 JQuery 数据表？

Posted 2023-05-08

【中文标题】如何在我的项目中包含 Bootstrap 3 和 JQuery 数据表？

【英文标题】：How to include Bootstrap 3 and JQuery Datatables in my project?

【发布时间】：2019-04-09 20:05:43

【问题描述】：

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

【问题讨论】：

我认为是真的。

@shaghayeghsheykholeslami 够了还是我还需要上面的代码来包含按钮？

你应该在你的代码中实现按钮，请解释一下我不明白你想做什么。

我需要使用按钮（打印、CSV、Excel、PDF 和复制）实现 JQuery、Bootstrap 3、JQuery 数据表。这有意义吗？

@espresso_coffee 我已经将这一切都包含在我工作过的项目中。如果没有人正确回答，稍后会附带指南。

【参考方案1】：

为了将其与 Bootstrap 集成，包含 Datatables（带有 Buttons 扩展名）的来源的正确顺序如下：

在 HEAD（样式来源）：

<!-- 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"/>

在 BODY 上（脚本来源）：

<!-- 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 存储库。

另外，请记住，只有在初始化步骤中正确配置了 Datatable 的 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

【参考方案2】：

你可以像这样包含

也可以参考这个链接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>

【讨论】：

JQuery 数据表中的按钮呢？它们是否自动包含在上面的代码中？还是我仍然需要我拥有的代码？

【参考方案3】：

看这段代码初始化数据表

 var initTable1 = function () 
        var table = $('#sample_1');

        var oTable = table.dataTable(

            // Internationalisation. For more info refer to http://datatables.net/manual/i18n
            "language": 
                "aria": 
                    "sortAscending": ": activate to sort column ascending",
                    "sortDescending": ": activate to sort column descending"
                ,
                "emptyTable": "No data available in table",
                "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                "infoEmpty": "No entries found",
                "infoFiltered": "(filtered1 from _MAX_ total entries)",
                "lengthMenu": "_MENU_ entries",
                "search": "Search:",
                "zeroRecords": "No matching records found"
            ,

            // Or you can use remote translation file
            //"language": 
            //   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
            //,


            buttons: [
                 extend: 'print', className: 'btn dark btn-outline' ,
                 extend: 'copy', className: 'btn red btn-outline' ,
                 extend: 'pdf', className: 'btn green btn-outline' ,
                 extend: 'excel', className: 'btn yellow btn-outline ' ,
                 extend: 'csv', className: 'btn purple btn-outline ' ,
                 extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'
            ],

            // setup responsive extension: http://datatables.net/extensions/responsive/
            responsive: true,

            //"ordering": false, disable column ordering 
            //"paging": false, disable pagination

            "order": [
                [0, 'asc']
            ],

            "lengthMenu": [
                [5, 10, 15, 20, -1],
                [5, 10, 15, 20, "All"] // change per page values here
            ],
            // set the initial value
            "pageLength": 10,

            "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

            // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
            // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
            // So when dropdowns used the scrollable div should be removed. 
            //"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
        );
    

有按钮的实现。 最后你应该像这段代码一样在文档中初始化你的数据表

jQuery(document).ready(function() 
    initTable1();
);