I am new to less
What I am trying to achieve is, I want to give a class to th element and then want to apply the same styles for all the td having same index as the th. So basically I am trying to find out the index of th so that I can use :nth-child() for that index.
Is that possible with less?
Edit
So I am trying to achieve something like this
td:nth-child(#index_of_th_with_particular_class)
{
}
Hope you mean like this, please take a look at the sample pen
CSS & HTML
table {
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid #ddd;
}
tr:nth-child(3) td {
background: yellow;
}
tr:nth-child(4) td:nth-child(5) {
background: red;
}
<div>
<table>
<thead></thead>
<tbody>
<tr>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
</tr>
<tr>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
</tr>
<tr>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
</tr>
<tr>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
</tr>
<tr>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
</tr>
<tr>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
</tr>
<tr>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
</tr>
<tr>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
</tr>
<tr>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
<td>Test data</td>
</tr>
</tbody>
</table>
</div>
LESS
table {
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid #ddd;
}
tr {
&:nth-child(3) {
td {
background: yellow;
}
}
&:nth-child(4) {
td {
&:nth-child(5) {
background: red;
}
}
}
}
Related
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>
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();
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>
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>
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.