---
description: https://codepen.io/RedJokingInn/pen/zZyRmR
---

# \[DATATABLE] HTML5 export buttons (ok)

## [HTML5 export buttons](https://datatables.net/extensions/buttons/examples/html5/simple.html)

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FcoBq2aHf88ckML6xrXWh%2Fimage.png?alt=media&#x26;token=bcd594f7-d99f-4280-aeeb-515883aaf43d" alt=""><figcaption></figcaption></figure>

C:\xampp\htdocs\wpclidemo\index.php

```php
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
  <title>Simple DataTable</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap.min.css">
  <style>
    body {
      margin: 2em;
    }
    td:last-child {
      text-align: center;
    }
  </style>
</head>
<body translate="no">
  <div class="alert alert-danger" role="alert"><strong>Info!</strong> Add row and Delete row are working. Edit row displays modal with row cells information.</div>
  <a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepen.io/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
  <div id="example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
    <div class="dt-buttons">
      <div class="dt-buttons btn-group">
        <a class="btn btn-default buttons-collection buttons-colvis" tabindex="0" aria-controls="example" href="#">
          <span>Column visibility</span>
        </a>
        <a class="btn btn-default buttons-copy buttons-html5" tabindex="0" aria-controls="example" href="#">
          <span>Copy</span>
        </a>
        <a class="btn btn-default buttons-csv buttons-html5" tabindex="0" aria-controls="example" href="#">
          <span>CSV</span>
        </a>
        <a class="btn btn-default buttons-excel buttons-html5" tabindex="0" aria-controls="example" href="#">
          <span>Excel</span>
        </a>
        <a class="btn btn-default buttons-pdf buttons-html5" tabindex="0" aria-controls="example" href="#">
          <span>PDF</span>
        </a>
        <a class="btn btn-default buttons-print" tabindex="0" aria-controls="example" href="#">
          <span>Print</span>
        </a>
      </div>
      <div id="example_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control input-sm" placeholder="" aria-controls="example"></label></div>
    </div>
    <div class="clear"></div>
    <div class="dataTables_info" id="example_info" role="status" aria-live="polite">Showing 1 to 30 of 30 entries</div>
    <table id="example" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" width="100%" aria-describedby="example_info" role="grid" style="width: 100%;">
      <thead>
        <tr role="row">
          <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Order: activate to sort column descending" style="width: 223px;">Order</th>
          <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Description: activate to sort column ascending" style="width: 514px;">Description</th>
          <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Deadline: activate to sort column ascending" style="width: 291px;">Deadline</th>
          <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 238px;">Status</th>
          <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Amount: activate to sort column ascending" style="width: 272px;">Amount</th>
          <th style="text-align:center;width:100px;" class="sorting_disabled" rowspan="1" colspan="1" aria-label="Add row
				">Add row <button type="button" data-func="dt-add" class="btn btn-success btn-xs dt-add">
              <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            </button></th>
        </tr>
      </thead>
      <tbody>
        <tr role="row" class="odd">
          <td class="sorting_1">1</td>
          <td>Alphabet puzzle</td>
          <td>2016/01/15</td>
          <td>Done</td>
          <td>1000</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">2</td>
          <td>Layout for poster</td>
          <td>2016/01/31</td>
          <td>Planned</td>
          <td>1834</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">3</td>
          <td>Image creation</td>
          <td>2016/01/23</td>
          <td>To Do</td>
          <td>1500</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">4</td>
          <td>Create font</td>
          <td>2016/02/26</td>
          <td>Done</td>
          <td>1200</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">5</td>
          <td>Sticker production</td>
          <td>2016/02/18</td>
          <td>Planned</td>
          <td>2100</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">6</td>
          <td>Glossy poster</td>
          <td>2016/03/17</td>
          <td>To Do</td>
          <td>899</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">7</td>
          <td>Beer label</td>
          <td>2016/05/28</td>
          <td>Confirmed</td>
          <td>2499</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">8</td>
          <td>Shop sign</td>
          <td>2016/04/19</td>
          <td>Offer</td>
          <td>1099</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">9</td>
          <td>X-Mas decoration</td>
          <td>2016/10/31</td>
          <td>Confirmed</td>
          <td>1750</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">10</td>
          <td>Halloween invite</td>
          <td>2016/09/12</td>
          <td>Planned</td>
          <td>400</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">11</td>
          <td>Wedding announcement</td>
          <td>2016/07/09</td>
          <td>To Do</td>
          <td>299</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">12</td>
          <td>Member pasport</td>
          <td>2016/06/22</td>
          <td>Offer</td>
          <td>149</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">13</td>
          <td>Drink tickets</td>
          <td>2016/11/01</td>
          <td>Confirmed</td>
          <td>199</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">14</td>
          <td>Album cover</td>
          <td>2017/03/15</td>
          <td>To Do</td>
          <td>4999</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">15</td>
          <td>Shipment box</td>
          <td>2017/02/08</td>
          <td>Offer</td>
          <td>1399</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">16</td>
          <td>Wooden puzzle</td>
          <td>2017/01/11</td>
          <td>Done</td>
          <td>1000</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">17</td>
          <td>Fashion Layout</td>
          <td>2016/01/30</td>
          <td>Planned</td>
          <td>1834</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">18</td>
          <td>Toy creation</td>
          <td>2016/01/10</td>
          <td>To Do</td>
          <td>1550</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">19</td>
          <td>Create stamps</td>
          <td>2016/02/26</td>
          <td>Done</td>
          <td>1220</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">20</td>
          <td>Sticker design</td>
          <td>2017/02/18</td>
          <td>Planned</td>
          <td>2100</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">21</td>
          <td>Poster rock concert</td>
          <td>2017/04/17</td>
          <td>To Do</td>
          <td>899</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">22</td>
          <td>Wine label</td>
          <td>2017/05/28</td>
          <td>Confirmed</td>
          <td>2799</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">23</td>
          <td>Shopping bag</td>
          <td>2017/04/19</td>
          <td>Offer</td>
          <td>1299</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">24</td>
          <td>Decoration for Easter</td>
          <td>2017/10/31</td>
          <td>Confirmed</td>
          <td>1650</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">25</td>
          <td>Saint Nicolas colorbook</td>
          <td>2017/09/12</td>
          <td>Planned</td>
          <td>510</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">26</td>
          <td>Wedding invites</td>
          <td>2017/07/09</td>
          <td>To Do</td>
          <td>399</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">27</td>
          <td>Member pasport</td>
          <td>2017/06/22</td>
          <td>Offer</td>
          <td>249</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">28</td>
          <td>Drink tickets</td>
          <td>2017/11/01</td>
          <td>Confirmed</td>
          <td>199</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">29</td>
          <td>Blue-Ray cover</td>
          <td>2018/03/15</td>
          <td>To Do</td>
          <td>1999</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">30</td>
          <td>TV carton</td>
          <td>2019/02/08</td>
          <td>Offer</td>
          <td>1369</td>
          <td>
            <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;">
              <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-danger btn-xs dt-delete">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- Modal -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Row information</h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.2.7/build/pdfmake.min.js"></script>
  <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.2.7/build/vfs_fonts.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script id="rendered-js">
    $(document).ready(function() {
      //Only needed for the filename of export files.
      //Normally set in the title tag of your page.
      document.title = 'Simple DataTable';
      // DataTable initialisation
      $('#example').DataTable({
        "dom": '<"dt-buttons"Bf><"clear">lirtp',
        "paging": false,
        "autoWidth": true,
        "columnDefs": [{
          "orderable": false,
          "targets": 5
        }],
        "buttons": [
          'colvis',
          'copyHtml5',
          'csvHtml5',
          'excelHtml5',
          'pdfHtml5',
          'print'
        ]
      });
      //Add row button
      $('.dt-add').each(function() {
        $(this).on('click', function(evt) {
          //Create some data and insert it
          var rowData = [];
          var table = $('#example').DataTable();
          //Store next row number in array
          var info = table.page.info();
          rowData.push(info.recordsTotal + 1);
          //Some description
          rowData.push('New Order');
          //Random date
          var date1 = new Date(2016, 01, 01);
          var date2 = new Date(2018, 12, 31);
          var rndDate = new Date(+date1 + Math.random() * (date2 - date1)); //.toLocaleDateString();
          rowData.push(rndDate.getFullYear() + '/' + (rndDate.getMonth() + 1) + '/' + rndDate.getDate());
          //Status column
          rowData.push('NEW');
          //Amount column
          rowData.push(Math.floor(Math.random() * 2000) + 1);
          //Inserting the buttons ???
          rowData.push('<button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button><button type="button" class="btn btn-danger btn-xs dt-delete"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>');
          //Looping over columns is possible
          //var colCount = table.columns()[0].length;
          //for(var i=0; i < colCount; i++){			}
          //INSERT THE ROW
          table.row.add(rowData).draw(false);
          //REMOVE EDIT AND DELETE EVENTS FROM ALL BUTTONS
          $('.dt-edit').off('click');
          $('.dt-delete').off('click');
          //CREATE NEW CLICK EVENTS
          $('.dt-edit').each(function() {
            $(this).on('click', function(evt) {
              $this = $(this);
              var dtRow = $this.parents('tr');
              $('div.modal-body').innerHTML = '';
              $('div.modal-body').append('Row index: ' + dtRow[0].rowIndex + '<br/>');
              $('div.modal-body').append('Number of columns: ' + dtRow[0].cells.length + '<br/>');
              for (var i = 0; i < dtRow[0].cells.length; i++) {
                if (window.CP.shouldStopExecution(0)) break;
                $('div.modal-body').append('Cell (column, row) ' + dtRow[0].cells[i]._DT_CellIndex.column + ', ' + dtRow[0].cells[i]._DT_CellIndex.row + ' => innerHTML : ' + dtRow[0].cells[i].innerHTML + '<br/>');
              }
              window.CP.exitedLoop(0);
              $('#myModal').modal('show');
            });
          });
          $('.dt-delete').each(function() {
            $(this).on('click', function(evt) {
              $this = $(this);
              var dtRow = $this.parents('tr');
              if (confirm("Are you sure to delete this row?")) {
                var table = $('#example').DataTable();
                table.row(dtRow[0].rowIndex - 1).remove().draw(false);
              }
            });
          });
        });
      });
      //Edit row buttons
      $('.dt-edit').each(function() {
        $(this).on('click', function(evt) {
          $this = $(this);
          var dtRow = $this.parents('tr');
          $('div.modal-body').innerHTML = '';
          $('div.modal-body').append('Row index: ' + dtRow[0].rowIndex + '<br/>');
          $('div.modal-body').append('Number of columns: ' + dtRow[0].cells.length + '<br/>');
          for (var i = 0; i < dtRow[0].cells.length; i++) {
            if (window.CP.shouldStopExecution(1)) break;
            $('div.modal-body').append('Cell (column, row) ' + dtRow[0].cells[i]._DT_CellIndex.column + ', ' + dtRow[0].cells[i]._DT_CellIndex.row + ' => innerHTML : ' + dtRow[0].cells[i].innerHTML + '<br/>');
          }
          window.CP.exitedLoop(1);
          $('#myModal').modal('show');
        });
      });
      //Delete buttons
      $('.dt-delete').each(function() {
        $(this).on('click', function(evt) {
          $this = $(this);
          var dtRow = $this.parents('tr');
          if (confirm("Are you sure to delete this row?")) {
            var table = $('#example').DataTable();
            table.row(dtRow[0].rowIndex - 1).remove().draw(false);
          }
        });
      });
      $('#myModal').on('hidden.bs.modal', function(evt) {
        $('.modal .modal-body').empty();
      });
    });
    //# sourceURL=pen.js
  </script>
</body>
</html>

```
