Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<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

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers