如何在我的项目中包含 Bootstrap 3 和 JQuery 数据表？
How to include Bootstrap 3 and JQuery Datatables in my project?
我对在我的项目中包含库有疑问。 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 并且关于应该包括什么的信息很少。此外，没有关于如何包含我在代码中使用的按钮的示例。如果有人知道如何实现这些库，或者我的代码需要一些调整，请告诉我。谢谢。
你可以像这样包含
也参考这个linkDatatable 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>
查看此代码以获取数据 table 初始化
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>>",
});
}
有按钮的实现。
最后你应该初始化你的数据 table 在 documnet 准备好像这个代码
jQuery(document).ready(function() {
initTable1();
});
为了将其与 Bootstrap 集成，Datatables（带有 Buttons 扩展）的正确顺序是下一个：
在头部（样式来源）：
<!-- 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
或者我之前做过的下一个解释：
我对在我的项目中包含库有疑问。 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 并且关于应该包括什么的信息很少。此外，没有关于如何包含我在代码中使用的按钮的示例。如果有人知道如何实现这些库，或者我的代码需要一些调整，请告诉我。谢谢。
你可以像这样包含
也参考这个linkDatatable 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>
查看此代码以获取数据 table 初始化
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>>",
});
}
有按钮的实现。 最后你应该初始化你的数据 table 在 documnet 准备好像这个代码
jQuery(document).ready(function() {
initTable1();
});
为了将其与 Bootstrap 集成，Datatables（带有 Buttons 扩展）的正确顺序是下一个：
在头部（样式来源）：
<!-- 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
或者我之前做过的下一个解释：