<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/jszip-2.5.0/dt-1.12.0/b-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/r-2.3.0/sb-1.3.3/datatables.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/jszip-2.5.0/dt-1.12.0/b-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/r-2.3.0/sb-1.3.3/datatables.min.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Training Summary</h1>
</div>
<div>
<table id="example" class="display">
<thead>
<tr>
<th>Junction Table ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Personnel ID</th>
<th>Course Title</th>
<th>Course Date</th>
<th>Training Course ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>124</td>
<td>Forest</td>
<td>Grump</td>
<td>358</td>
<td>Chemical Safety</td>
<td>2022-05-06</td>
<td>17</td>
</tr><tr>
<td>98</td>
<td>Karl</td>
<td>Bayberry</td>
<td>338</td>
<td>General Safety Clause</td>
<td>2022-02-28</td>
<td>11</td>
</tr><tr>
<td>97</td>
<td>Karl</td>
<td>Bayberry</td>
<td>338</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-21</td>
<td>19</td>
</tr><tr>
<td>96</td>
<td>Claire</td>
<td>Franklin</td>
<td>356</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-23</td>
<td>19</td>
</tr><tr>
<td>95</td>
<td>havon</td>
<td>jesset</td>
<td>506</td>
<td>Lockout/Tagout Program</td>
<td>2022-02-21</td>
<td>8</td>
</tr><tr>
<td>94</td>
<td>joyce</td>
<td>Barringer</td>
<td>505</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-23</td>
<td>19</td>
</tr><tr>
<td>93</td>
<td>Maggie</td>
<td>Chintall</td>
<td>12</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-23</td>
<td>19</td>
</tr><tr>
<td>92</td>
<td>Karl</td>
<td>LHobart</td>
<td>340</td>
<td>OSHA Recordkeeping</td>
<td>2022-02-25</td>
<td>12</td>
</tr><tr>
<td>91</td>
<td>Karl</td>
<td>LHobart</td>
<td>340</td>
<td>HAZWOPER</td>
<td>2022-03-01</td>
<td>169</td>
</tr><tr>
<td>90</td>
<td>Karl</td>
<td>LHobart</td>
<td>340</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-23</td>
<td>19</td>
</tr><tr>
<td>89</td>
<td>Calvin</td>
<td>Chintall</td>
<td>295</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-24</td>
<td>19</td>
</tr><tr>
<td>88</td>
<td>Calvin</td>
<td>Chintall</td>
<td>295</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-24</td>
<td>19</td>
</tr><tr>
<td>87</td>
<td>Calvin</td>
<td>Chintall</td>
<td>295</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-24</td>
<td>19</td>
</tr><tr>
<td>85</td>
<td>joyce</td>
<td>Barringer</td>
<td>505</td>
<td>HAZWOPER</td>
<td>2022-02-22</td>
<td>169</td>
</tr><tr>
<td>84</td>
<td>Michael</td>
<td>Johnson</td>
<td>344</td>
<td>Emergency Action Plans</td>
<td>2022-03-01</td>
<td>18</td>
</tr><tr>
<td>83</td>
<td>Michael</td>
<td>Johnson</td>
<td>344</td>
<td>OSHA Recordkeeping</td>
<td>2022-02-25</td>
<td>12</td>
</tr><tr>
<td>82</td>
<td>Michael</td>
<td>Johnson</td>
<td>344</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-24</td>
<td>19</td>
</tr><tr>
<td>81</td>
<td>John</td>
<td>Hook</td>
<td>334</td>
<td>OSHA Recordkeeping</td>
<td>2022-02-10</td>
<td>12</td>
</tr><tr>
<td>80</td>
<td>John</td>
<td>Hook</td>
<td>334</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-09</td>
<td>19</td>
</tr><tr>
<td>79</td>
<td>Joyce</td>
<td>Barringer</td>
<td>505</td>
<td>OSHA Recordkeeping</td>
<td>2022-02-09</td>
<td>12</td>
</tr><tr>
<td>78</td>
<td>Joyce</td>
<td>Barringer</td>
<td>505</td>
<td>Emergency Action Plans</td>
<td>2022-03-01</td>
<td>18</td>
</tr><tr>
<td>77</td>
<td>havon</td>
<td>jesset</td>
<td>506</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-16</td>
<td>19</td>
</tr><tr>
<td>76</td>
<td>Joyce</td>
<td>Barringer</td>
<td>505</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-03-16</td>
<td>19</td>
</tr><tr>
<td>75</td>
<td>Earl</td>
<td>Young</td>
<td>359</td>
<td>WFI Plant</td>
<td>2022-02-04</td>
<td>22</td>
</tr><tr>
<td>74</td>
<td>Earl</td>
<td>Young</td>
<td>359</td>
<td>Current Good Manufacturing Practices</td>
<td>2022-02-01</td>
<td>19</td>
</tr>
</tbody>
</table></div>
<div>
<script>
(function($){
$(document).ready(function () {
$('#example').DataTable();
});
var table = $('#example').DataTable( {
dom: 'QBfrtip',
columns: [
{
"data": "idtrainingcourse_personnel",
},
/* { data: null, render: function ( data, type, row ) {
// Combine the first and last names into a single table field
return data.FName+' '+data.LName;
}
},
*/
{
"data": "fname"
},
{
"data": "lname"
},
{
"data": "idpersonnel"
},
{
"data": "coursetitle"
},
{
"data": "course_date"
},
{
"data": "idtrainingcourses"
}
],
fields: [
{
"label": "idtrainingcourse_personnel:",
"name": "idtrainingcourse_personnel"
},
{
"label": "FName:",
"name": "fname"
},
{
"label": "LName:",
"name": "lname"
},
{
"label": "idPersonnel:",
"name": "idpersonnel"
},
{
"label": "coursetitle:",
"name": "coursetitle"
},
{
"label": "Course_date:",
"name": "course_date",
"type": "datetime",
"format": "MM-DD-YY"
},
{
"label": "idtrainingcourses:",
"name": "idtrainingcourses"
}
],
select: true,
// lengthChange: false,
colReorder: true,
buttons: [
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'print'
]
},
{
extend: 'print',
//autoPrint: false,
text: 'Print Results',
title: 'Personnel Training Summary',
exportOptions:
{
columns: ':visible'
},
//title: 'Customisation of the print view window',
messageTop: 'Employee Training Record',
//messageTop: 'This print was produced using the Print button for DataTables',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '12pt' )
.css( 'color', 'blue')
.prepend(
// '<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
);
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', '12pt' )
.css( 'color', 'black')
.css( 'text-align', 'center');
$(win.document.body).find('thead')
.css('font-variant', 'small-caps')
.css('color', 'yellow');
}
}
]
} );
}(jQuery));
</script>
</body>
</html>
Output
300px
This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account
Dismiss xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |