Jquery Datatable plugin not working on html table - datatables

I am trying to use the DataTable plugin to add functionality to my html table. I followed the steps for installation and initialization from datatables.net, but it is not adding any functionality to my html page. I am wondering if it is because my table is formatted in a way that isn't supported by the plug-in.
<html>
<head>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
}
);
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</body>
</html>


Your problem is that you are loading the dataTable.js before jQuery. (you can see the problem in the webconsole of your browser (usually, when typing F12). Loading jQuery before will solve your problem:
<!-- first jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- then dataTables -->
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
}
);
</script>

Related

How to add checkbox option instead of dropdown for "show entries" in Datatable header

I want to remove the dropdown option from "Show entries" portion in Datatable's header. And need to add checkbox for how many rows to shows per page.
https://ibb.co/ngKVLkk

You need to combine some different techniques to implement this:
Use the DataTables dom option to customize the table layout.
Use a CSS grid layout in combination with the dom option, to ensure the page length control is aligned with the search box.
Generate the page control HTML dynamically so it can be placed in the HTML generated by the dom option.
Set an initial page length.
Add an event listener to respond to page length changes.
Use the DataTables .page.len() function to actually change the page length.
Here is a demo for the above approach:
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: '<"dt-top-container"<"dt-left"><"dt-center"><"dt-right"f>>rtip'
} );
var pageLengths = ['5', '20', '50', '100'];
checkbox_html = pageLengths.map((length, idx) => {
let html = '<input type="radio" class="check-row" name="page_size"';
if (idx === 0) {
return html + ' value="' + length + '" checked>' + length;
} else {
return html + ' value="' + length + '">' + length;
}
}).join(' ');
$("div.dt-left").html(checkbox_html);
var intialPageLen = parseInt($('input[name=page_size]:checked', 'body').val());
table.page.len( intialPageLen ).draw();
$( 'body' ).on( 'click', 'input[name=page_size]', function() {
table.page.len( $( this ).val() ).draw();
});
} );
.check-row {
display: inline-block;
margin: 0 2px 0 8px;
}
div.dt-top-container {
display: grid;
grid-template-columns: auto auto auto;
}
div.dt-left {
}
div.dt-center {
margin: 0 auto;
}
div.dt-right {
margin: 0 0 0 auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Radio Buttons not Check Boxes
I changed your check boxes to radio buttons, since these ensure that only one value is selected at a time.
Additional Notes
Change the page lengths array to whatever you want:
var pageLengths = ['5', '20', '50', '100'];
The HTML for these page lengths is built using the pageLengths.map() logic. The first value in the array is the one which is used for the initial table display.
The dom option is used to manage what gets placed in the top left hand field above the Datatable:
'<"dt-top-container"<"dt-left"><"dt-center"><"dt-right"f>>rtip'
This is where the CSS grid layout is used.
Finally, the click event is where we re-draw the table, to change the page length:
table.page.len( $( this ).val() ).draw();

Datatables and Moment.js for D-MMM-YY sorting

I'm trying to get my datatables with dates entered in the D-MMM-YY format to be sorted but it doesn't appear to do so, only by the 1st digit in the date.
For example, it sorts 9-Sep-13 before 1-Jun-20.
A typical table line is as follows:
<tr>
<td>25-Jul-11</td>
<td>Announcement</td>
<td>#</td>
</tr>
My javascript is as follows:
<script type="text/javascript">
$(document).ready(function() {
$.fn.dataTable.moment( 'D-MMM-YY');
$('#pn2020').DataTable({
"pageLength": 20,
order: [[ 0, "desc" ]],
} );
} );
</script> <!-- InstanceEndEditable -->
Is this D-MMM-YY format even accepted?

The following works, with your date format.
End result, showing dates sorted in ascending order:
Plug-ins added to the <head> section (in addition to the standard DataTables and jQuery items):
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/dataRender/datetime.js"></script>
The test data:
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>26-Jul-10</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>25-Mar-11</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2-Jul-11</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>5-Jul-11</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>25-Jul-11</td>
<td>$162,700</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
The datatable configuration, where the date is manipulated:
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
targets: 4, // column 5
render: $.fn.dataTable.render.moment( 'D-MMM-YY', 'D-MMM-YY' )
} ]
} );
} );
</script>
This reads in the date in the same format in which it is displayed - which is why the pattern is repeated. For more options, see here.

jQuery Datatables: Copy to clipboard using an external button

I wanted to copy datatables contents to clipboard using a button that is not contained in datatables.
Doing it with a button inside Datatables is very easy with the buttons: ['copyHtml5'] option.
Is it possible to link the onclick() method of a html button to do this?
For example, I did the same with the search filter with this code that links an external html input (myFilter) with Datatables search action:
$("#myFilter").on("keyup", function() {
dataTable.search(this.value).draw();
});

You can do something like this to trigger copy.
var table= $('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy'
]
} );
$("#copycustomButton").on("click", function() {
table.button( '.buttons-copy' ).trigger();
});
.buttons-copy{
display:none !important
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<button id="copycustomButton">
copy
</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
</tr>
</tbody>
</table>

order from recent date DataTables dd/mm/yyyy

I made a table using DataTables plugin.
I created a column called "Date" wich contains some dates. With the button near "Date" I can order records but I have to use this format for the dates dd/mm/yyyy so the order is wrong.
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-striped" id="mydata">
<thead>
<tr>
<th>ID</th>
<th>Schedina</th>
<th>Quota</th>
<th>Stake</th>
<th>Data</th>
<th>Risultato</th>
</tr>
</thead>
<tbody>
<tr>
<td>41</td>
<td>12</td>
<td>21</td>
<td>12</td>
<td value="2020-11-15">15/11/2020</td>
<td>In corso</td>
</tr>
<tr>
<td>37</td>
<td>a</td>
<td>4.52</td>
<td>10</td>
<td value="2017-04-07">07/04/2017</td>
<td>Vinto</td>
</tr>
<tr>
<td>40</td>
<td>prova 123<br> prova</td>
<td>2.01</td>
<td>15</td>
<td value="2017-01-15">15/01/2017</td>
<td>In corso</td>
</tr>
<tr>
<td>42</td>
<td>oggi</td>
<td>2</td>
<td>21</td>
<td value="2017-01-15">15/01/2017</td>
<td>Vinto</td>
</tr>
<tr>
<td>43</td>
<td>1212dwed</td>
<td>12</td>
<td>12</td>
<td value="2017-01-15">15/01/2017</td>
<td>Perso</td>
</tr>
<tr>
<td>39</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td value="2017-01-14">14/01/2017</td>
<td>Vinto</td>
</tr>
<tr>
<td>38</td>
<td>a</td>
<td>2</td>
<td>12</td>
<td value="2017-01-13">13/01/2017</td>
<td>Perso</td>
</tr>
<tr>
<td>36</td>
<td>a</td>
<td>1.94</td>
<td>30</td>
<td value="2017-01-12">12/01/2017</td>
<td>Vinto</td>
</tr>
<tr>
<td>35</td>
<td>a</td>
<td>1.95</td>
<td>30</td>
<td value="2017-01-12">12/01/2017</td>
<td>Perso</td>
</tr>
<tr>
<td>34</td>
<td>a</td>
<td>1.93</td>
<td>30</td>
<td value="2017-01-12">12/01/2017</td>
<td>Vinto</td>
</tr>
<tr>
<td>33</td>
<td>Nad</td>
<td>1.82</td>
<td>30</td>
<td>12/01/2017</td>
<td>Vinto</td>
</tr>
</tbody>
</table>
<script>
$('#mydata').DataTable( {
responsive: true
} );
</script>
This is why I didn't post it. There is an error in lineno 0 . But in my file i don't have any error
How can I solve this problem?

You are comparing dates as strings, but the strings contain the day at start. Let's implement a helper function:
function helper(input) {
var dateElements = input.split("/");
return dateElements[2] + dateElements[1] + dateElements[0];
}
and use this to convert your elements to their desired format. Then you will be able to compare them, as year will be at the start, month will follow and day will be at the end.

HTML file using Jquery DataTables will load from file but not from IDE: $(...)DataTable is not a function error

I have a short test html file in which I include the Jquery Plugin DataTables. If I open the html file from the desktop into Chrome or Safari or another browser, it works. If however, I try to launch the file from within an IDE (like Xpages or Coda), I get the error $(...)DataTable is not a function.
I have included the Jquery library first, so I am baffled at to what the problem is.
The code is below:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script>
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
</script>
<script>
$(document).ready( function () {
var table = $('#example').DataTable();
} );
</script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Please try to remove your body style, first, because it has a wrong format. In your code sample:
<script>
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
</script>
The second thing I see is a strange error message: "$(…)DataTable is not a function" there is no point symbol after $(…).