SCRIPT438 error yadcf - yadcf

I'm just testing yadcf but I keep getting SCRIPT438 error in IE (in ff it is TypeError: $(...).DataTable(...).yadcf is not a function)
and I'm quite sure my libraries are on the right place, I can browse them using developer tools
What am I doing wrong ?
using version 0.9.2
this is my example:
<html>
<head>
<LINK href="DataTables-1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<LINK href="yadcf-0.9.2/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css">
<SCRIPT SRC=jquery-1.11.3.min.js TYPE=text/javascript></SCRIPT>
<SCRIPT SRC=DataTables-1.10.11/js/jquery.dataTables.min.js TYPE=text/javascript></SCRIPT>
<SCRIPT SRC=yadcf-0.9.2/jquery.dataTables.yadcf.js TYPE=text/javascript></SCRIPT>
<script>
$(document).ready( function () {
// alert("press format data");
$('#ResTbl').DataTable({
"columnDefs": [
{
"targets": [ 0 ],
// "visible": false,
"orderable": false ,
"searchable": false
}
]
}).yadcf( [
{column_number : 2, filter_type: "range_number_slider"} ,
// {column_number : 0, data: ["MOD", "CON"], filter_default_label: "..."},
{column_number: 1, filter_type: "auto_complete", text_data_delimiter: "," }
]);
} );
</script>
</head>
<body>
<table id="ResTbl" class="compact">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>1</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>2</td>
</tr>
<tr>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
<td>3</td>
</tr>
<tr>
<td>Row 4 Data 1</td>
<td>Row 4 Data 2</td>
<td>4</td>
</tr>
<tr>
<td>Row 5 Data 1</td>
<td>Row 5 Data 2</td>
<td>5</td>
</tr>
<tr>
<td>Row 6 Data 1</td>
<td>Row 6 Data 2</td>
<td>6</td>
</tr>
<tr>
<td>Row 7 Data 1</td>
<td>Row 7 Data 2</td>
<td>7</td>
</tr>
<tr>
<td>Row 8 Data 1</td>
<td>Row 8 Data 2</td>
<td>8</td>
</tr>
<tr>
<td>Row 9 Data 1</td>
<td>Row 9 Data 2</td>
<td>9</td>
</tr>
<tr>
<td>Row 10 Data 1</td>
<td>Row 10 Data 2</td>
<td>10</td>
</tr>
<tr>
<td>Row 11 Data 1</td>
<td>Row 11 Data 2</td>
<td>11</td>
</tr>
<tr>
<td>Row 12 Data 1</td>
<td>Row 12 Data 2</td>
<td>12</td>
</tr>
</tbody>
</table>
</body>
</html>
What am i doin wrong ?


You are using new Datatables api with old yadcf api
From the showcase:
note that this is the old yadcf API for init the filters new init
function should be used when working with new Datatable (capital "D"
API) for new init function see: DOM_Ajax_Multiple_1.10.html
When you constructing the dataables using the "Capital letter D" it returns an object (which is not a jquery object) therefor you must use the yadcf.init() function to inityadcf upon it, like that:
var oTable = $('#example').DataTable();
yadcf.init(oTable, [{column_number: 0}]);
Anyway go over the docs (inside the yadcf js file) to learn about all yadcf goodies...

Related

How to add class for values in specific columns that matches a given pattern in jQuery.DataTables?

I want to add a classname "red" to:
all values that are less than 10.
Only for those in column X,Y...
How can I achieve this?
It looks something like this:

You can do it using The callback createdRow as follows :
This callback is executed when a TR element is created (and all TD child elements have been inserted), it used to format a particular row at draw time.
$(document).ready(function () {
$('#example').DataTable({
createdRow: function (row, data, index) {
if (data[2] < 10) {
$('td', row).eq(2).addClass('red');
}
if (data[3] < 10) {
$('td', row).eq(3).addClass('red');
}
},
});
});
td.red {
font-weight: bold;
color: red;
}
<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<table id="example">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>23</td>
</tr>
<tr>
<td>16.5454</td>
<td>16.5454</td>
<td>15</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>15</td>
<td>16.5454</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>316.5454</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>16.5454</td>
<td>16.5454</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>15</td>
<td>16.5454</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>316.5454</td>
<td>1</td>
<td>3</td>
</tr>
</tbody>
</table>

How do I render numbers like 4999 to $4,999.00 in datatables?

If the data source is from an existed DOM, rather than some JSON variable. How do I convert the numbers like 4999 to $4,999.00 in datatables?
I don't know what kind of options should be passed to the main function.
$('#example').DataTable(
{
// need help on this
}
);
Here is the code:
$(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(
{
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepenio/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">1000</td>
</tr>
<tr>
<td>2</td>
<td>Layout for poster</td>
<td>2016/01/31</td>
<td>Planned</td>
<td data-order="1834">1834</td>
</tr>
<tr>
<td>3</td>
<td>Image creation</td>
<td>2016/01/23</td>
<td>To Do</td>
<td data-order="1500">1500</td>
</tr>
<tr>
<td>4</td>
<td>Create font</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1200">1200</td>
</tr>
<tr>
<td>5</td>
<td>Sticker production</td>
<td>2016/02/18</td>
<td>Planned</td>
<td data-order="2100">2100</td>
</tr>
<tr>
<td>6</td>
<td>Glossy poster</td>
<td>2016/03/17</td>
<td>To Do</td>
<td data-order="899">899</td>
</tr>
<tr>
<td>7</td>
<td>Beer label</td>
<td>2016/05/28</td>
<td>Confirmed</td>
<td data-order="2499">2499</td>
</tr>
<tr>
<td>8</td>
<td>Shop sign</td>
<td>2016/04/19</td>
<td>Offer</td>
<td data-order="1099">1099</td>
</tr>
<tr>
<td>9</td>
<td>X-Mas decoration</td>
<td>2016/10/31</td>
<td>Confirmed</td>
<td data-order="1750">1750</td>
</tr>
<tr>
<td>10</td>
<td>Halloween invite</td>
<td>2016/09/12</td>
<td>Planned</td>
<td data-order="400">400</td>
</tr>
<tr>
<td>11</td>
<td>Wedding announcement</td>
<td>2016/07/09</td>
<td>To Do</td>
<td data-order="299">299</td>
</tr>
<tr>
<td>12</td>
<td>Member pasport</td>
<td>2016/06/22</td>
<td>Offer</td>
<td data-order="149">149</td>
</tr>
<tr>
<td>13</td>
<td>Drink tickets</td>
<td>2016/11/01</td>
<td>Confirmed</td>
<td data-order="199">199</td>
</tr>
<tr>
<td>14</td>
<td>Album cover</td>
<td>2017/03/15</td>
<td>To Do</td>
<td data-order="4999">4999</td>
</tr>
<tr>
<td>15</td>
<td>Shipment box</td>
<td>2017/02/08</td>
<td>Offer</td>
<td data-order="1399">1399</td>
</tr>
<tr>
<td>16</td>
<td>Wooden puzzle</td>
<td>2017/01/11</td>
<td>Done</td>
<td data-order="1000">1000</td>
</tr>
<tr>
<td>17</td>
<td>Fashion Layout</td>
<td>2016/01/30</td>
<td>Planned</td>
<td data-order="1834">1834</td>
</tr>
<tr>
<td>18</td>
<td>Toy creation</td>
<td>2016/01/10</td>
<td>To Do</td>
<td data-order="1550">1550</td>
</tr>
<tr>
<td>19</td>
<td>Create stamps</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1220">1220</td>
</tr>
<tr>
<td>20</td>
<td>Sticker design</td>
<td>2017/02/18</td>
<td>Planned</td>
<td data-order="2100">2100</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</td>
</tr>
<tr>
<td>22</td>
<td>Wine label</td>
<td>2017/05/28</td>
<td>Confirmed</td>
<td data-order="2799">2799</td>
</tr>
<tr>
<td>23</td>
<td>Shopping bag</td>
<td>2017/04/19</td>
<td>Offer</td>
<td data-order="1299">1299</td>
</tr>
<tr>
<td>24</td>
<td>Decoration for Easter</td>
<td>2017/10/31</td>
<td>Confirmed</td>
<td data-order="1650">1650</td>
</tr>
<tr>
<td>25</td>
<td>Saint Nicolas colorbook</td>
<td>2017/09/12</td>
<td>Planned</td>
<td data-order="510">510</td>
</tr>
<tr>
<td>26</td>
<td>Wedding invites</td>
<td>2017/07/09</td>
<td>To Do</td>
<td data-order="399">399</td>
</tr>
<tr>
<td>27</td>
<td>Member pasport</td>
<td>2017/06/22</td>
<td>Offer</td>
<td data-order="249">249</td>
</tr>
<tr>
<td>28</td>
<td>Drink tickets</td>
<td>2017/11/01</td>
<td>Confirmed</td>
<td data-order="199">199</td>
</tr>
<tr>
<td>29</td>
<td>Blue-Ray cover</td>
<td>2018/03/15</td>
<td>To Do</td>
<td data-order="1999">1999</td>
</tr>
<tr>
<td>30</td>
<td>TV carton</td>
<td>2019/02/08</td>
<td>Offer</td>
<td data-order="1369">1369</td>
</tr>
</tbody>
</table>

You can use the createdCell() callback, inside DataTables' columnDefs initializazion option.
Inside the callback, you have access to the <td> element of the created cell and to its data, so you can manipulate both in the way that you prefer.
In this fiddle I changed the shown data format using the Intl.NumberFormat() api:
$(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({
columnDefs: [{
targets: 4, // <-- this is the target column
createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
const formattedContent = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(cellData);
cell.innerHTML = formattedContent;
},
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepenio/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">1000</td>
</tr>
<tr>
<td>2</td>
<td>Layout for poster</td>
<td>2016/01/31</td>
<td>Planned</td>
<td data-order="1834">1834</td>
</tr>
<tr>
<td>3</td>
<td>Image creation</td>
<td>2016/01/23</td>
<td>To Do</td>
<td data-order="1500">1500</td>
</tr>
<tr>
<td>4</td>
<td>Create font</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1200">1200</td>
</tr>
<tr>
<td>5</td>
<td>Sticker production</td>
<td>2016/02/18</td>
<td>Planned</td>
<td data-order="2100">2100</td>
</tr>
<tr>
<td>6</td>
<td>Glossy poster</td>
<td>2016/03/17</td>
<td>To Do</td>
<td data-order="899">899</td>
</tr>
<tr>
<td>7</td>
<td>Beer label</td>
<td>2016/05/28</td>
<td>Confirmed</td>
<td data-order="2499">2499</td>
</tr>
<tr>
<td>8</td>
<td>Shop sign</td>
<td>2016/04/19</td>
<td>Offer</td>
<td data-order="1099">1099</td>
</tr>
<tr>
<td>9</td>
<td>X-Mas decoration</td>
<td>2016/10/31</td>
<td>Confirmed</td>
<td data-order="1750">1750</td>
</tr>
<tr>
<td>10</td>
<td>Halloween invite</td>
<td>2016/09/12</td>
<td>Planned</td>
<td data-order="400">400</td>
</tr>
<tr>
<td>11</td>
<td>Wedding announcement</td>
<td>2016/07/09</td>
<td>To Do</td>
<td data-order="299">299</td>
</tr>
<tr>
<td>12</td>
<td>Member pasport</td>
<td>2016/06/22</td>
<td>Offer</td>
<td data-order="149">149</td>
</tr>
<tr>
<td>13</td>
<td>Drink tickets</td>
<td>2016/11/01</td>
<td>Confirmed</td>
<td data-order="199">199</td>
</tr>
<tr>
<td>14</td>
<td>Album cover</td>
<td>2017/03/15</td>
<td>To Do</td>
<td data-order="4999">4999</td>
</tr>
<tr>
<td>15</td>
<td>Shipment box</td>
<td>2017/02/08</td>
<td>Offer</td>
<td data-order="1399">1399</td>
</tr>
<tr>
<td>16</td>
<td>Wooden puzzle</td>
<td>2017/01/11</td>
<td>Done</td>
<td data-order="1000">1000</td>
</tr>
<tr>
<td>17</td>
<td>Fashion Layout</td>
<td>2016/01/30</td>
<td>Planned</td>
<td data-order="1834">1834</td>
</tr>
<tr>
<td>18</td>
<td>Toy creation</td>
<td>2016/01/10</td>
<td>To Do</td>
<td data-order="1550">1550</td>
</tr>
<tr>
<td>19</td>
<td>Create stamps</td>
<td>2016/02/26</td>
<td>Done</td>
<td data-order="1220">1220</td>
</tr>
<tr>
<td>20</td>
<td>Sticker design</td>
<td>2017/02/18</td>
<td>Planned</td>
<td data-order="2100">2100</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</td>
</tr>
<tr>
<td>22</td>
<td>Wine label</td>
<td>2017/05/28</td>
<td>Confirmed</td>
<td data-order="2799">2799</td>
</tr>
<tr>
<td>23</td>
<td>Shopping bag</td>
<td>2017/04/19</td>
<td>Offer</td>
<td data-order="1299">1299</td>
</tr>
<tr>
<td>24</td>
<td>Decoration for Easter</td>
<td>2017/10/31</td>
<td>Confirmed</td>
<td data-order="1650">1650</td>
</tr>
<tr>
<td>25</td>
<td>Saint Nicolas colorbook</td>
<td>2017/09/12</td>
<td>Planned</td>
<td data-order="510">510</td>
</tr>
<tr>
<td>26</td>
<td>Wedding invites</td>
<td>2017/07/09</td>
<td>To Do</td>
<td data-order="399">399</td>
</tr>
<tr>
<td>27</td>
<td>Member pasport</td>
<td>2017/06/22</td>
<td>Offer</td>
<td data-order="249">249</td>
</tr>
<tr>
<td>28</td>
<td>Drink tickets</td>
<td>2017/11/01</td>
<td>Confirmed</td>
<td data-order="199">199</td>
</tr>
<tr>
<td>29</td>
<td>Blue-Ray cover</td>
<td>2018/03/15</td>
<td>To Do</td>
<td data-order="1999">1999</td>
</tr>
<tr>
<td>30</td>
<td>TV carton</td>
<td>2019/02/08</td>
<td>Offer</td>
<td data-order="1369">1369</td>
</tr>
</tbody>
</table>

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.

Oracle SQL: Convert number of digits to maximum number

I have a table 1 with a column NUMBER_OF_DIGITS and another table 2 with a column READING_VALUE
I want to get the values from table 2 which are nearing maximum value
Example: NUMBER_OF_DIGITS - 4 , maximum value is 9999 and I need to get the values nearest to 9999 from table 2
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Table 1</p>
<table>
<tr>
<th>PK</th>
<th>NUMBER_OF_DIGITS</th>
</tr>
<tr>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>5</td>
</tr>
</table>
<p>Table 2</p>
<table>
<tr>
<th>PK</th>
<th>VALUE</th>
</tr>
<tr>
<td>1</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>9990</td>
</tr>
<tr>
<td>3</td>
<td>900</td>
</tr>
<tr>
<td>4</td>
<td>45</td>
</tr>
<tr>
<td>5</td>
<td>99789</td>
</tr>
<tr>
<td>6</td>
<td>23456</td>
</tr>
</table>
</body>
</html>

Try this, the join you will have to figure out for yourself:
select to_number(substr('99999999999999999', 1, max_digits), '99999999999999999') - Table2.READING_VALUE as Val_Diff
from Table1
inner join Table2
on Somecommoncol = someothercommoncol

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.