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>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.js"></script>
<style type="text/css">
.data-table-container {
  padding: 10px;
}
.dt-buttons .btn {
  margin-right: 3px;
}
</style>
<script>
  $(document).ready(function(){
     $('table.data-table').DataTable({
      paging: false,
      columnDefs: [{
        targets: 'no-sort',
        orderable: false
      }],
      dom: '<"row"<"col-sm-6"Bl><"col-sm-6"f>>' +
        '<"row"<"col-sm-12"<"table-responsive"tr>>>' +
        '<"row"<"col-sm-5"i><"col-sm-7"p>>',
      fixedHeader: {
        header: true
      },
      buttons: {
        buttons: [{
          extend: 'print',
          text: '<i class="fa fa-print"></i> Print',
          title: $('h1').text(),
          exportOptions: {
            columns: ':not(.no-print)'
          },
          footer: true,
          autoPrint: false
        }, {
          extend: 'pdf',
          text: '<i class="fa fa-file-pdf-o"></i> PDF',
          title: $('h1').text(),
          exportOptions: {
            columns: ':not(.no-print)'
          },
          footer: true
        }],
        dom: {
          container: {
            className: 'dt-buttons'
          },
          button: {
            className: 'btn btn-default'
          }
        }
      }
    });
    
    /* custom button event print */
    $(document).on('click', '#btnPrint', function(){
       $(".buttons-print")[0].click(); //trigger the click event
    });
​
  });
  </script>
</head>
<body>
<h1>Print test</h1>
<button id="btnPrint">Custom Print Button</button>
<div class="data-table-container">
  <table class="table table-hover table-striped table-bordered data-table">
    <thead>
      <tr>
        <th class="text-right">No.</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-right">1</td>
        <td>Name 1</td>
      </tr>
      <tr>
        <td class="text-right">2</td>
        <td>Name 2</td>
      </tr>
    </tbody>
    <tfoot>
                <tr>
                    <td colspan="2" class="text-center">footer text</td>
                </tr>
            </tfoot>
  </table>
</div>
</body>
</html>
Output

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

Dismiss x
public
Bin info
chandrakeshkumarpro
0viewers