https://codepen.io/RedJokingInn/pen/vYJKKEJ
Last updated
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/1.2.2/css/buttons.bootstrap.min.css">
<style>
body {
margin: 2em;
}
thead input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
</head>
<body translate="no">
<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">
<table id="example" class="table table-striped table-bordered dataTable" 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-label="Order: activate to sort column descending" style="width: 147px;" aria-sort="ascending">Order</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Description: activate to sort column ascending" style="width: 181px;">Description</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Deadline: activate to sort column ascending" style="width: 165px;">Deadline</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 152px;">Status</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Amount: activate to sort column ascending" style="width: 160px;">Amount</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 data-order="1000">€1.000,00</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 data-order="1834">€1.834,00</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 data-order="1500">€1.500,00</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 data-order="1200">€1.200,00</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 data-order="2100">€2.100,00</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 data-order="899">€899,00</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 data-order="2499">€2.499,00</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 data-order="1099">€1.099,00</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 data-order="1750">€1.750,00</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 data-order="400">€400,00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Order</th>
<th>Description</th>
<th>Deadline</th>
<th>Status</th>
<th>Amount</th>
</tr>
</tfoot>
</table>
</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/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/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/1.2.2/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.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script>
$(document).ready(function() {
//Only needed for the filename of export files.
//Normally set in the title tag of your page.
document.title = "Simple DataTable";
// Create search inputs in footer
$("#example tfoot th").each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable initialisation
var table = $("#example").DataTable({
dom: '<"dt-buttons"Bf><"clear">lirtp',
paging: true,
autoWidth: true,
buttons: [
"colvis",
"copyHtml5",
"csvHtml5",
"excelHtml5",
"pdfHtml5",
"print"
],
initComplete: function(settings, json) {
var footer = $("#example tfoot tr");
$("#example thead").append(footer);
}
});
// Apply the search
$("#example thead").on("keyup", "input", function() {
table.column($(this).parent().index()).
search(this.value).
draw();
});
});
//# sourceURL=pen.js
</script>
</body>
</html>
