[DATATABLE] HTML5 export buttons (ok)
https://codepen.io/RedJokingInn/pen/zZyRmR
C:\xampp\htdocs\wpclidemo\index.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>
Previous[DATATABLE] Datatable multiple checkbox demo (ok)Next[DATATABLE] CodePen Home DataTable 2 Card view (ok)
Last updated
