HTML I want to export the below two dataTables into a single pdf with single export button. Both the dataTables have different columns so it cannot be merged.
JavaScript
x
206
206
1
<div class="container" id="exTable"> 2
<div class=" mt-3">3
<h2>Basic Table Example1</h2>4
<table class="table" id="example1" style="width:100%">5
<thead class="table-dark">6
<tr>7
<th>User Priority</th>8
<th>Average MTTR(Hrs)</th>9
<th>Total Number Of Tickets</th>10
</tr>11
</thead>12
<tbody>13
<tr>14
<td>1-Critical</td>15
<td>164.12</td>16
<td>182</td>17
</tr>18
<tr>19
<td>2-High</td>20
<td>190.23</td>21
<td>498</td>22
</tr>23
<tr>24
<td>3-Moderate</td>25
<td>908.93</td>26
<td>1511</td>27
</tr>28
<tr>29
<td>4-Low</td>30
<td>211.43</td>31
<td>1817</td>32
</tr>33
</tbody>34
</table>35
</div>36
<div class="table-responsive mt-3">37
<h2>Basic Table Example2</h2>38
<table class="table display nowrap" id="example2">39
<thead class="table-dark">40
<tr>41
<th>Tower</th>42
<th>CC</th>43
<th>Cluster</th>44
<th>Assignment Group</th>45
<th>Ticket Priority</th>46
<th>Average MTTR(Hrs)</th>47
<th>Total Number Of Tickets</th>48
<th>Incidents resolved Using KO's</th>49
</tr>50
</thead>51
<tbody>52
<tr>53
<td>MANUFACTURING</td>54
<td>RICHMOND GROUPS</td>55
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>56
<td>SN PM USA Workbrain WFM and ETM</td>57
<td>1 - Critical</td>58
<td>4.89</td>59
<td>5</td>60
<td>0</td>61
</tr>62
<tr>63
<td>MANUFACTURING</td>64
<td>RICHMOND GROUPS</td>65
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>66
<td>SN PM USA Workbrain WFM and ETM</td>67
<td>1 - Critical</td>68
<td>4.89</td>69
<td>5</td>70
<td>0</td>71
</tr>72
<tr>73
<td>MANUFACTURING</td>74
<td>RICHMOND GROUPS</td>75
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>76
<td>SN PM USA Workbrain WFM and ETM</td>77
<td>1 - Critical</td>78
<td>4.89</td>79
<td>5</td>80
<td>0</td>81
</tr>82
<tr>83
<td>MANUFACTURING</td>84
<td>RICHMOND GROUPS</td>85
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>86
<td>SN PM USA Workbrain WFM and ETM</td>87
<td>1 - Critical</td>88
<td>4.89</td>89
<td>5</td>90
<td>0</td>91
</tr>92
<tr>93
<td>MANUFACTURING</td>94
<td>RICHMOND GROUPS</td>95
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>96
<td>SN PM USA Workbrain WFM and ETM</td>97
<td>1 - Critical</td>98
<td>4.89</td>99
<td>5</td>100
<td>0</td>101
</tr>102
<tr>103
<td>MANUFACTURING</td>104
<td>RICHMOND GROUPS</td>105
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>106
<td>SN PM USA Workbrain WFM and ETM</td>107
<td>1 - Critical</td>108
<td>4.89</td>109
<td>5</td>110
<td>0</td>111
</tr>112
<tr>113
<td>MANUFACTURING</td>114
<td>RICHMOND GROUPS</td>115
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>116
<td>SN PM USA Workbrain WFM and ETM</td>117
<td>1 - Critical</td>118
<td>4.89</td>119
<td>5</td>120
<td>0</td>121
</tr>122
<tr>123
<td>MANUFACTURING</td>124
<td>RICHMOND GROUPS</td>125
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>126
<td>SN PM USA Workbrain WFM and ETM</td>127
<td>1 - Critical</td>128
<td>4.89</td>129
<td>5</td>130
<td>0</td>131
</tr>132
<tr>133
<td>MANUFACTURING</td>134
<td>RICHMOND GROUPS</td>135
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>136
<td>SN PM USA Workbrain WFM and ETM</td>137
<td>1 - Critical</td>138
<td>4.89</td>139
<td>5</td>140
<td>0</td>141
</tr>142
<tr>143
<td>MANUFACTURING</td>144
<td>RICHMOND GROUPS</td>145
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>146
<td>SN PM USA Workbrain WFM and ETM</td>147
<td>1 - Critical</td>148
<td>4.89</td>149
<td>5</td>150
<td>0</td>151
</tr>152
<tr>153
<td>MANUFACTURING</td>154
<td>RICHMOND GROUPS</td>155
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>156
<td>SN PM USA Workbrain WFM and ETM</td>157
<td>1 - Critical</td>158
<td>4.89</td>159
<td>5</td>160
<td>0</td>161
</tr>162
<tr>163
<td>MANUFACTURING</td>164
<td>RICHMOND GROUPS</td>165
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>166
<td>SN PM USA Workbrain WFM and ETM</td>167
<td>1 - Critical</td>168
<td>4.89</td>169
<td>5</td>170
<td>0</td>171
</tr>172
<tr>173
<td>MANUFACTURING</td>174
<td>RICHMOND GROUPS</td>175
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>176
<td>SN PM USA Workbrain WFM and ETM</td>177
<td>1 - Critical</td>178
<td>4.89</td>179
<td>5</td>180
<td>0</td>181
</tr>182
<tr>183
<td>MANUFACTURING</td>184
<td>RICHMOND GROUPS</td>185
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>186
<td>SN PM USA Workbrain WFM and ETM</td>187
<td>1 - Critical</td>188
<td>4.89</td>189
<td>5</td>190
<td>0</td>191
</tr>192
<tr>193
<td>MANUFACTURING</td>194
<td>RICHMOND GROUPS</td>195
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>196
<td>SN PM USA Workbrain WFM and ETM</td>197
<td>1 - Critical</td>198
<td>4.89</td>199
<td>5</td>200
<td>0</td>201
</tr>202
</tbody>203
</table>204
</div> 205
</div>206
CSS
JavaScript
1
7
1
table{2
table-layout:fixed;3
}4
td,th{5
font-size:10px;overflow:hidden;6
}7
Java Script I want make changes in this dataTable jQuery functions in such a way that if I click on single button both the dataTables data should be exported in same pdf file.
JavaScript
1
20
20
1
$(document).ready(function () {2
$('#example1').DataTable({3
dom: 'Bfrtip',4
buttons: [5
'pdfHtml5'6
] 7
});8
});9
$(document).ready(function () {10
$('#example2').DataTable({11
scrollX: true,12
pageLength : 5,13
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],14
dom: 'Bfrtip',15
buttons: [16
'pdfHtml5'17
] 18
});19
});20
Advertisement
Answer
Here is an approach which creates one PDF containing the data from both DataTables in the web page:
- The first data table is created with no button:
JavaScript
1
2
1
$('#example1').DataTable();2
- The second table uses the
customize: function ( doc ) { ... }syntax – the same as I linked to in my comments.
Within that function, we access the data for the first table:
JavaScript
1
2
1
var table1 = $('#example1').DataTable();2
We build arrays for the
headingsrow and thedatarows. This gives us the raw data for that smaller table.We convert this raw data into the format needed to build a PDF table and store it in a
tbl1_rowsarray:
JavaScript
1
2
1
var tbl1_rows = []; // the data from the first table2
- Finally we clone the PDF table data from the main table, then replace its data with our
tbl1_rowsdata – and then we insert this new table object into the PDF:
JavaScript
1
4
1
var clone = structuredClone(doc.content[1]);2
clone.table.body = tbl1_rows;3
doc.content.splice(1, 0, clone);4
The end result:
So, basically, the approach is to just create one PDF for the main table – and splice in the extra data for that additional table, that you also want to display in the same PDF.
Here is the full code for reference:
JavaScript
1
54
54
1
$(document).ready(function() {2
3
$('#example1').DataTable();4
5
$('#example2').DataTable({6
dom: 'Brftip',7
buttons: [8
{9
text: 'PDF Export',10
extend: 'pdfHtml5',11
customize: function ( doc ) {12
var table1 = $('#example1').DataTable();13
var headings = table1.columns().header().to$().map(function(i,e) { return e.innerHTML;}).get();;14
var data = table1.rows().data(); 15
16
var tbl1_rows = []; // the data from the first table17
18
// PDF header row for the first table:19
tbl1_rows.push( $.map( headings, function ( d ) {20
return {21
text: typeof d === 'string' ? d : d+'',22
style: 'tableHeader'23
};24
} ) );25
26
// PDF body rows for the first table:27
for ( var i = 0, ien = data.length ; i < ien ; i++ ) {28
tbl1_rows.push( $.map( data[i], function ( d ) {29
if ( d === null || d === undefined ) {30
d = '';31
}32
return {33
text: typeof d === 'string' ? d : d+'',34
style: i % 2 ? 'tableBodyEven' : 'tableBodyOdd'35
};36
} ) );37
}38
39
// create a clone of the main PDF table (where 40
// content[0] is the PDF's main heading, and content[1]41
// is the main table:42
var clone = structuredClone(doc.content[1]);43
//replace the main table data with the tbl1_rows data:44
clone.table.body = tbl1_rows;45
// insert that cloned table into the main PDF doc, between46
// the PDF title and the main table:47
doc.content.splice(1, 0, clone);48
49
}50
}51
]52
});53
54
} );JavaScript
1
234
234
1
<!doctype html>2
<html>3
<head>4
<meta charset="UTF-8">5
<title>Demo</title>6
7
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css"/>8
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.css"/>9
10
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>11
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>12
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.js"></script>13
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>14
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>15
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.js"></script>16
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.js"></script>17
18
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">19
20
</head>21
22
<body>23
24
<div style="margin: 20px;">25
26
<div class="container" id="exTable"> 27
<div class=" mt-3">28
<h2>Basic Table Example1</h2>29
30
<table class="table" id="example1" style="width:100%">31
<thead class="table-dark">32
<tr>33
<th>User Priority</th>34
<th>Average MTTR(Hrs)</th>35
<th>Total Number Of Tickets</th>36
</tr>37
</thead>38
<tbody>39
<tr>40
<td>1-Critical</td>41
<td>164.12</td>42
<td>182</td>43
</tr>44
<tr>45
<td>2-High</td>46
<td>190.23</td>47
<td>498</td>48
</tr>49
<tr>50
<td>3-Moderate</td>51
<td>908.93</td>52
<td>1511</td>53
</tr>54
<tr>55
<td>4-Low</td>56
<td>211.43</td>57
<td>1817</td>58
</tr>59
</tbody>60
</table>61
</div>62
<div class="table-responsive mt-3">63
<h2>Basic Table Example2</h2>64
<table class="table display nowrap" id="example2">65
<thead class="table-dark">66
<tr>67
<th>Tower</th>68
<th>CC</th>69
<th>Cluster</th>70
<th>Assignment Group</th>71
<th>Ticket Priority</th>72
<th>Average MTTR(Hrs)</th>73
<th>Total Number Of Tickets</th>74
<th>Incidents resolved Using KO's</th>75
</tr>76
</thead>77
<tbody>78
<tr>79
<td>MANUFACTURING 01</td>80
<td>RICHMOND GROUPS</td>81
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>82
<td>SN PM USA Workbrain WFM and ETM</td>83
<td>1 - Critical</td>84
<td>4.89</td>85
<td>5</td>86
<td>0</td>87
</tr>88
<tr>89
<td>MANUFACTURING 02</td>90
<td>RICHMOND GROUPS</td>91
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>92
<td>SN PM USA Workbrain WFM and ETM</td>93
<td>1 - Critical</td>94
<td>4.89</td>95
<td>5</td>96
<td>0</td>97
</tr>98
<tr>99
<td>MANUFACTURING 03</td>100
<td>RICHMOND GROUPS</td>101
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>102
<td>SN PM USA Workbrain WFM and ETM</td>103
<td>1 - Critical</td>104
<td>4.89</td>105
<td>5</td>106
<td>0</td>107
</tr>108
<tr>109
<td>MANUFACTURING 04</td>110
<td>RICHMOND GROUPS</td>111
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>112
<td>SN PM USA Workbrain WFM and ETM</td>113
<td>1 - Critical</td>114
<td>4.89</td>115
<td>5</td>116
<td>0</td>117
</tr>118
<tr>119
<td>MANUFACTURING 05</td>120
<td>RICHMOND GROUPS</td>121
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>122
<td>SN PM USA Workbrain WFM and ETM</td>123
<td>1 - Critical</td>124
<td>4.89</td>125
<td>5</td>126
<td>0</td>127
</tr>128
<tr>129
<td>MANUFACTURING 06</td>130
<td>RICHMOND GROUPS</td>131
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>132
<td>SN PM USA Workbrain WFM and ETM</td>133
<td>1 - Critical</td>134
<td>4.89</td>135
<td>5</td>136
<td>0</td>137
</tr>138
<tr>139
<td>MANUFACTURING 07</td>140
<td>RICHMOND GROUPS</td>141
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>142
<td>SN PM USA Workbrain WFM and ETM</td>143
<td>1 - Critical</td>144
<td>4.89</td>145
<td>5</td>146
<td>0</td>147
</tr>148
<tr>149
<td>MANUFACTURING 08</td>150
<td>RICHMOND GROUPS</td>151
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>152
<td>SN PM USA Workbrain WFM and ETM</td>153
<td>1 - Critical</td>154
<td>4.89</td>155
<td>5</td>156
<td>0</td>157
</tr>158
<tr>159
<td>MANUFACTURING 09</td>160
<td>RICHMOND GROUPS</td>161
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>162
<td>SN PM USA Workbrain WFM and ETM</td>163
<td>1 - Critical</td>164
<td>4.89</td>165
<td>5</td>166
<td>0</td>167
</tr>168
<tr>169
<td>MANUFACTURING 10</td>170
<td>RICHMOND GROUPS</td>171
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>172
<td>SN PM USA Workbrain WFM and ETM</td>173
<td>1 - Critical</td>174
<td>4.89</td>175
<td>5</td>176
<td>0</td>177
</tr>178
<tr>179
<td>MANUFACTURING 11</td>180
<td>RICHMOND GROUPS</td>181
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>182
<td>SN PM USA Workbrain WFM and ETM</td>183
<td>1 - Critical</td>184
<td>4.89</td>185
<td>5</td>186
<td>0</td>187
</tr>188
<tr>189
<td>MANUFACTURING 12</td>190
<td>RICHMOND GROUPS</td>191
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>192
<td>SN PM USA Workbrain WFM and ETM</td>193
<td>1 - Critical</td>194
<td>4.89</td>195
<td>5</td>196
<td>0</td>197
</tr>198
<tr>199
<td>MANUFACTURING 13</td>200
<td>RICHMOND GROUPS</td>201
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>202
<td>SN PM USA Workbrain WFM and ETM</td>203
<td>1 - Critical</td>204
<td>4.89</td>205
<td>5</td>206
<td>0</td>207
</tr>208
<tr>209
<td>MANUFACTURING 14</td>210
<td>RICHMOND GROUPS</td>211
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>212
<td>SN PM USA Workbrain WFM and ETM</td>213
<td>1 - Critical</td>214
<td>4.89</td>215
<td>5</td>216
<td>0</td>217
</tr>218
<tr>219
<td>MANUFACTURING 15</td>220
<td>RICHMOND GROUPS</td>221
<td>Workbrain - Infor HCM Version 6.1.2 - Enterprise Workforce Management</td>222
<td>SN PM USA Workbrain WFM and ETM</td>223
<td>1 - Critical</td>224
<td>4.89</td>225
<td>5</td>226
<td>0</td>227
</tr>228
</tbody>229
</table>230
</div> 231
</div>232
233
</body>234
</html>Acknowledgements
I took some of the above approach from the official DataTables source code for PDF exports:
Update
For future visitors to this question:
If you want to further format the report, you can take a look at the PDFMake documentation and use their playground to try different things for yourself.
For example, if you want to add a space between the two tables, you can assign a bottom margin to the first table:
JavaScript
1
2
1
clone.margin = [ 0, 0, 0, 10 ];2
More examples: You can change the row striping and cell borders. See How to remove header in PDF export result from DataTable and change color table fill to white?