如何在数据表中启用复制、PDF、Excel 按钮
How to enable Copy, PDF, Excel buttons in DataTables
我想启用“复制、PDF、Excel”按钮，使其看起来像这样：
这是我的代码，但未能上传：
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "0,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "0,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", ",000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "3,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "2,700"],
["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "2,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "7,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "7,900"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "5,500"],
["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "3,600"],
["Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", ",560"],
["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "2,000"],
["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "0,600"],
["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "3,500"],
["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "5,750"],
["Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "8,500"],
["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "5,000"],
["Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "7,500"],
["Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "2,000"],
["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "7,500"],
["Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "5,000"],
["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "5,000"],
["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "6,450"],
["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", ",600"],
["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", ",200,000"],
["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", ",575"],
["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "7,650"],
["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "6,850"],
["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "0,000"],
["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "3,000"],
["Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", ",400"],
["Suki Burks", "Developer", "London", "6832", "2009/10/22", "4,500"],
["Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "5,000"],
["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "5,500"],
["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "4,050"],
["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",675"]
];
$(document).ready(function() {
$('#example').DataTable({
data: dataSet,
buttons: ['copy', 'excel', 'pdf'],
columns: [{
title: "Name"
}, {
title: "Position"
}, {
title: "Office"
}, {
title: "Extn."
}, {
title: "Start date"
}, {
title: "Salary"
}]
});
});
<link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3/datatables.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3/datatables.min.js"></script>
<table id="example" class="display" width="100%">
之前我们可以使用TableTools but now it's called Button.
在此代码中，您可以找到完整的 运行 代码。
并不是说在那个代码中我已经 included CSS 和 "Button" 的 JS
功能。
正确的做法是什么？
DataTables Buttons extension is not provided by default. So be sure to add it to your dependencies (see the link for more informations). Export buttons such as "Excel", "PDF" require "Flash export" or "HTML5 export" code or both in Download builder.
并且您必须告诉 DataTables 在何处插入按钮。您有两个选择：
- 在
dom选项中包含字符B，例如dom: 'Bfrtip'
- 使用
$('#example').DataTable().buttons() 获取包含按钮的 jQuery 集合并将其插入到您想要的位置。
演示版
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "0,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "0,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", ",000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "3,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "2,700"],
["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "2,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "7,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "7,900"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "5,500"],
["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "3,600"],
["Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", ",560"],
["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "2,000"],
["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "0,600"],
["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "3,500"],
["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "5,750"],
["Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "8,500"],
["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "5,000"],
["Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "7,500"],
["Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "2,000"],
["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "7,500"],
["Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "5,000"],
["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "5,000"],
["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "6,450"],
["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", ",600"],
["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", ",200,000"],
["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", ",575"],
["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "7,650"],
["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "6,850"],
["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "0,000"],
["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "3,000"],
["Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", ",400"],
["Suki Burks", "Developer", "London", "6832", "2009/10/22", "4,500"],
["Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "5,000"],
["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "5,500"],
["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "4,050"],
["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",675"]
];
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
data: dataSet,
buttons: ['copy', 'excel', 'pdf'],
columns: [{
title: "Name"
}, {
title: "Position"
}, {
title: "Office"
}, {
title: "Extn."
}, {
title: "Start date"
}, {
title: "Salary"
}]
});
});
<link href="https://cdn.datatables.net/r/dt/jqc-1.11.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,b-1.0.3,b-flash-1.0.3,b-html5-1.0.3/datatables.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jqc-1.11.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,b-1.0.3,b-flash-1.0.3,b-html5-1.0.3/datatables.min.js"></script>
<table id="example" class="display" width="100%">
我想启用“复制、PDF、Excel”按钮，使其看起来像这样：
这是我的代码，但未能上传：
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "0,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "0,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", ",000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "3,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "2,700"],
["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "2,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "7,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "7,900"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "5,500"],
["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "3,600"],
["Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", ",560"],
["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "2,000"],
["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "0,600"],
["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "3,500"],
["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "5,750"],
["Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "8,500"],
["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "5,000"],
["Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "7,500"],
["Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "2,000"],
["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "7,500"],
["Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "5,000"],
["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "5,000"],
["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "6,450"],
["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", ",600"],
["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", ",200,000"],
["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", ",575"],
["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "7,650"],
["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "6,850"],
["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "0,000"],
["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "3,000"],
["Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", ",400"],
["Suki Burks", "Developer", "London", "6832", "2009/10/22", "4,500"],
["Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "5,000"],
["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "5,500"],
["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "4,050"],
["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",675"]
];
$(document).ready(function() {
$('#example').DataTable({
data: dataSet,
buttons: ['copy', 'excel', 'pdf'],
columns: [{
title: "Name"
}, {
title: "Position"
}, {
title: "Office"
}, {
title: "Extn."
}, {
title: "Start date"
}, {
title: "Salary"
}]
});
});
<link href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3/datatables.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3/datatables.min.js"></script>
<table id="example" class="display" width="100%">
之前我们可以使用TableTools but now it's called Button.
在此代码中，您可以找到完整的 运行 代码。 并不是说在那个代码中我已经 included CSS 和 "Button" 的 JS 功能。 正确的做法是什么？
DataTables Buttons extension is not provided by default. So be sure to add it to your dependencies (see the link for more informations). Export buttons such as "Excel", "PDF" require "Flash export" or "HTML5 export" code or both in Download builder.
并且您必须告诉 DataTables 在何处插入按钮。您有两个选择：
- 在
dom选项中包含字符B，例如dom: 'Bfrtip' - 使用
$('#example').DataTable().buttons()获取包含按钮的 jQuery 集合并将其插入到您想要的位置。
演示版
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "0,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "0,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", ",000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "3,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "2,700"],
["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "2,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "7,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "7,900"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "5,500"],
["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "3,600"],
["Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", ",560"],
["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "2,000"],
["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "0,600"],
["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "3,500"],
["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "5,750"],
["Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "8,500"],
["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "5,000"],
["Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "7,500"],
["Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "2,000"],
["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "7,500"],
["Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "5,000"],
["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "5,000"],
["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "6,450"],
["Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", ",600"],
["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", ",200,000"],
["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", ",575"],
["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "7,650"],
["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "6,850"],
["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "0,000"],
["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "3,000"],
["Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", ",400"],
["Suki Burks", "Developer", "London", "6832", "2009/10/22", "4,500"],
["Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "5,000"],
["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "5,500"],
["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "4,050"],
["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",675"]
];
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
data: dataSet,
buttons: ['copy', 'excel', 'pdf'],
columns: [{
title: "Name"
}, {
title: "Position"
}, {
title: "Office"
}, {
title: "Extn."
}, {
title: "Start date"
}, {
title: "Salary"
}]
});
});
<link href="https://cdn.datatables.net/r/dt/jqc-1.11.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,b-1.0.3,b-flash-1.0.3,b-html5-1.0.3/datatables.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jqc-1.11.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,b-1.0.3,b-flash-1.0.3,b-html5-1.0.3/datatables.min.js"></script>
<table id="example" class="display" width="100%">