Question

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

主页

<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

您可以这样包含

也请参考此链接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>

Answer 2

查找此代码以进行数据表初始化

 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>>",
        });
    }

有按钮的工具。最后，您应该像这样的代码那样在documnet中初始化您的数据表

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

Answer 3

下一个正确的顺序包括：数据表的源（具有Buttons扩展），以便与 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存储库。

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

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

3 个答案: