DataTables Template
How do I make an datatables template?
Just a simple datatables initial setup as example and for future use to build more advanced examples.. What is a datatables template? How do you make a datatables template? This script and codes were developed by Dirk Drijkoningen on 19 January 2023, Thursday.
DataTables Template - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DataTables Template</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepen.io/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>Order</th> <th>Description</th> <th>Deadline</th> <th>Status</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Alphabet puzzle</td> <td>2016/01/15</td> <td>Done</td> <td data-order="1000">€1.000,00</td> </tr> <tr> <td>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> <td>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> <td>4</td> <td>Create font</td> <td>2016/02/26</td> <td>Done</td> <td data-order="1200">€1.200,00</td> </tr> <tr> <td>5</td> <td>Sticker production</td> <td>2016/02/18</td> <td>Planned</td> <td data-order="2100">€2.100,00</td> </tr> <tr> <td>6</td> <td>Glossy poster</td> <td>2016/03/17</td> <td>To Do</td> <td data-order="899">€899,00</td> </tr> <tr> <td>7</td> <td>Beer label</td> <td>2016/05/28</td> <td>Confirmed</td> <td data-order="2499">€2.499,00</td> </tr> <tr> <td>8</td> <td>Shop sign</td> <td>2016/04/19</td> <td>Offer</td> <td data-order="1099">€1.099,00</td> </tr> <tr> <td>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> <td>10</td> <td>Halloween invite</td> <td>2016/09/12</td> <td>Planned</td> <td data-order="400">€400,00</td> </tr> <tr> <td>11</td> <td>Wedding announcement</td> <td>2016/07/09</td> <td>To Do</td> <td data-order="299">€299,00</td> </tr> <tr> <td>12</td> <td>Member pasport</td> <td>2016/06/22</td> <td>Offer</td> <td data-order="149">€149,00</td> </tr> <tr> <td>13</td> <td>Drink tickets</td> <td>2016/11/01</td> <td>Confirmed</td> <td data-order="199">€199,00</td> </tr> <tr> <td>14</td> <td>Album cover</td> <td>2017/03/15</td> <td>To Do</td> <td data-order="4999">€4.999,00</td> </tr> <tr> <td>15</td> <td>Shipment box</td> <td>2017/02/08</td> <td>Offer</td> <td data-order="1399">€1.399,00</td> </tr> <tr> <td>16</td> <td>Wooden puzzle</td> <td>2017/01/11</td> <td>Done</td> <td data-order="1000">€1.000,00</td> </tr> <tr> <td>17</td> <td>Fashion Layout</td> <td>2016/01/30</td> <td>Planned</td> <td data-order="1834">€1.834,00</td> </tr> <tr> <td>18</td> <td>Toy creation</td> <td>2016/01/10</td> <td>To Do</td> <td data-order="1550">€1.550,00</td> </tr> <tr> <td>19</td> <td>Create stamps</td> <td>2016/02/26</td> <td>Done</td> <td data-order="1220">€1.220,00</td> </tr> <tr> <td>20</td> <td>Sticker design</td> <td>2017/02/18</td> <td>Planned</td> <td data-order="2100">€2.100,00</td> </tr> <tr> <td>21</td> <td>Poster rock concert</td> <td>2017/04/17</td> <td>To Do</td> <td data-order="899">€899,00</td> </tr> <tr> <td>22</td> <td>Wine label</td> <td>2017/05/28</td> <td>Confirmed</td> <td data-order="2799">€2.799,00</td> </tr> <tr> <td>23</td> <td>Shopping bag</td> <td>2017/04/19</td> <td>Offer</td> <td data-order="1299">€1.299,00</td> </tr> <tr> <td>24</td> <td>Decoration for Easter</td> <td>2017/10/31</td> <td>Confirmed</td> <td data-order="1650">€1.650,00</td> </tr> <tr> <td>25</td> <td>Saint Nicolas colorbook</td> <td>2017/09/12</td> <td>Planned</td> <td data-order="510">€510,00</td> </tr> <tr> <td>26</td> <td>Wedding invites</td> <td>2017/07/09</td> <td>To Do</td> <td data-order="399">€399,00</td> </tr> <tr> <td>27</td> <td>Member pasport</td> <td>2017/06/22</td> <td>Offer</td> <td data-order="249">€249,00</td> </tr> <tr> <td>28</td> <td>Drink tickets</td> <td>2017/11/01</td> <td>Confirmed</td> <td data-order="199">€199,00</td> </tr> <tr> <td>29</td> <td>Blue-Ray cover</td> <td>2018/03/15</td> <td>To Do</td> <td data-order="1999">€1.999,00</td> </tr> <tr> <td>30</td> <td>TV carton</td> <td>2019/02/08</td> <td>Offer</td> <td data-order="1369">€1.369,00</td> </tr> </tbody>
</table> <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/vfs_fonts.js'></script>
<script src='https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
DataTables Template - Script Codes CSS Codes
body {margin:2em;}
DataTables Template - Script Codes JS Codes
$(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": true, "autoWidth": true, "buttons": [ 'colvis', 'copyHtml5', 'csvHtml5', 'excelHtml5', 'pdfHtml5', 'print' ] } );
});
![DataTables Template - Script Codes](http://shots.codepen.io/RedJokingInn/pen/bwgrwB-512.jpg)
Developer | Dirk Drijkoningen |
Username | RedJokingInn |
Uploaded | January 19, 2023 |
Rating | 3 |
Size | 3,037 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
DataTables example of styling Excel export | 5,395 Kb |
DataTables conditional row styling | 3,136 Kb |
For loop | 1,388 Kb |
Calculating column totals with DataTables | 2,553 Kb |
DataTables Excel Header and Footer | 3,702 Kb |
Functie en array | 1,477 Kb |
Just a test | 3,868 Kb |
DataTables Excel cell style | 3,418 Kb |
DataTables custom row buttons | 4,399 Kb |
DataTables fixed header | 3,218 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Haml Calendar | Katydecorah | 5,643 Kb |
Hc first draft | Stepfray | 5,104 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Loading animation | Codeams | 2,408 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!