Here I set as described the data table thousand separator, but it doesn't work the way I expected.
Can anybody help me?
$('#example').dataTable( {
"language": {
"thousands": "'"
}
} );
table.dataTable thead th {
border-bottom: 0;
}
table.dataTable tfoot th {
border-top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/plug-ins/1.10.24/sorting/formatted-numbers.js"></script>
<table id="example">
<thead>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>320800</td>
</tr>
<tr>
<td>22</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2011/07/25</td>
<td>170750</td>
</tr>
<tr>
<td>6</td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>2009/01/12</td>
<td>86000</td>
</tr>
<tr>
<td>41</td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>2012/03/29</td>
<td>433060</td>
</tr>
<tr>
<td>55</td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2008/11/28</td>
<td>162700</td>
</tr>
<tr>
<td>21</td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>2012/12/02</td>
<td>372000</td>
</tr>
<tr>
<td>46</td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>2012/08/06</td>
<td>137500</td>
</tr>
</tbody>
</table>
Thanks
You can use a column render function to convert your source data from numbers without thousands separators to the format you want.
$(document).ready(function() {
var table = $('#example').DataTable( {
"lengthMenu": [ 5, 10, 50, 100 ], // just for testing!
columnDefs: [
{
targets: [5],
render: function ( data, type, row, meta ) {
return '$' + parseInt(data).toLocaleString('en-US');
}
}
]
} );
} );
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/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>2</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>320800</td>
</tr>
<tr>
<td>22</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2011/07/25</td>
<td>170750</td>
</tr>
<tr>
<td>6</td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>2009/01/12</td>
<td>86000</td>
</tr>
<tr>
<td>41</td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>2012/03/29</td>
<td>433060</td>
</tr>
<tr>
<td>55</td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2008/11/28</td>
<td>162700</td>
</tr>
<tr>
<td>21</td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>2012/12/02</td>
<td>372000</td>
</tr>
<tr>
<td>46</td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>2012/08/06</td>
<td>137500</td>
</tr>
</tbody>
</table>
</div>
</body>
This has the following features:
It will work for every record in the table, not just for those which are displayed on the first page.
It does not require a regular expression such as data.replace(/\B(?=(\d{3})+(?!\d))/g, ","); - and is therefore easier to understand.
It uses JavaScript's built-in support for number formatting using toLocaleString. This means it is also possible to change the thousands separator by applying a different locale (the language tag). For example, if you replace 'en-US' with fr-FR, then you will get the type of thousands separator used in France, which is a space - so $320 800 instead of $320,800.
The above code assumes the source data is provided as number without a currency symbol:
<td>320800</td>
If the source data already has a currency symbol at the start of the string, for example, like this:
<td>$320800</td>
then you would need to adjust the render function as follows:
render: function ( data, type, row, meta ) {
return data.substring(0, 1) + parseInt(data.substring(1)).toLocaleString('en-US');
}
I resolve the issue , I using following code
$('#example').dataTable( {
"language": {
"thousands": "'"
}
} );
function numberWithCommas(number) {
var parts = number.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join(".");
}
$(document).ready(function() {
$("#example td").each(function() {
var num = $(this).text();
var commaNum = numberWithCommas(num);
$(this).text(commaNum);
});
Related
Link to test case: http://live.datatables.net/yevonevo/1/edit?html,js,output
Link to documentation tutorial: https://datatables.net/examples/api/counter_columns.html
Goal: Creating a index column that behaves as a "ranking" column, right after initialization, so it assigns fixed indexes to rows that will be preserved when re-ordering the table according to other columns.
I am playing around and I have come up with 2 different ways that behave slightly different:
Setting data property of cell:
$('#example').on('init.dt', function() {
console.log('init');
let i = 1;
$('#example').DataTable().cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
this.data(i++);
});
});
var table = $('#example').DataTable({
pageLength: 5,
order: [[1,'asc']]
});
Setting innerHTML of node:
$('#example').on('init.dt', function() {
$('#example').DataTable().column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
});
});
var table = $('#example').DataTable({
pageLength: 5,
order: [[1,'asc']]
});
Both create the indexes perfectly, but while I am able to manually re-order the table based on the first column ranking values using the first solution, I cannot use that column to re-order using the second option (with manually I mean after having created the table and clicking on sortin arrows).
Why does that happen?
When you make a change directly to a node in the DOM (a change to the table HTML)...
cell.innerHTML = i+1;
...then you are using a web API, not a DataTables function.
That change is not visible to DataTables (the underlying JavaScript data structure), unless you tell DataTables about that change. If DataTables re-draws the table it will use its internal data - and any DOM changes in the HTML table will be discarded.
The data you see when you look at the web page may not be the data which DataTables has stored.
Contrast that with a DataTables API function such as:
cell().data( value )
...which updates the underlying DataTable data. Now, when a re-draw of the table happens (explicitly or implicitly), you get to see that data.
DataTables assigns a zero-based internal row ID when it is initialized - based on the order in which rows were loaded from whatever source you are using. You can make that internal ID visible if you want:
"render": function ( data, type, row, meta ) {
return meta.row + 1;
}
See columns.render
An example:
$(document).ready(function() {
var table = $('#example').DataTable( {
"columnDefs": [ {
"targets": 0,
//"data": "",
"render": function ( data, type, row, meta ) {
return meta.row + 1;
}
} ]
} );
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/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>Index</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<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></td>
<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></td>
<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></td>
<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></td>
<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></td>
<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></td>
<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></td>
<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></td>
<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></td>
<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></td>
<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></td>
<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></td>
<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>
</tbody>
</table>
</div>
</body>
</html>
I am very new to html/javascript and I am struggling to have this fixed, would you please help!!
I am trying to use DataTables jQuery plugin for sorting an IP-address column.
I found followed many resources and but I couldn't full apply them as there is no full solution provided.
I don't have a clue on how to define this column with the correct type to connect the puzzle pieces! :
"aoColumns": [
null,
{ "sType": 'string-ip' },
null
],
$('#example').dataTable( {
columnDefs: [
{ type: 'ip-address', targets: 0 }
]
} );
can someone fix the below code?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create jquery databable easily</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.11.3/sorting/ip-address.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable({
});
});
</script>
</head>
<body>
<h2>Create jquery datatable easily</h2>
</body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th id=name>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th id=ipaddress sType=string-ip>IP-Address</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>10.29.0.36</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>172.29.0.78</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>172.29.0.98</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>172.29.0.47</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>172.29.0.56</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>172.29.0.2</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>172.29.0.223</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>172.29.0.20</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>172.29.0.13</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>172.29.0.113</td>
<td>$103,600</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>IP-address</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</html>
In your example in the question, the column containing the IP addresses is the 5th column (so its index is 4 - column 1 has an index of zero).
That is the value you need to use in the targets option: you are targeting column index 4 to use the ip-address custom data type.
<script>
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [
{ type: 'ip-address', targets: 4 }
]
} );
} );
</script>
You were very close with your fragment: { type: 'ip-address', targets: 0 } - just change 0 to 4.
I recommend you put the DataTable script at the end of the page - immediately before the closing </body> tag.
Here is a runnable demo - click on the triangles in the IP Address column to see the plugin being used:
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [
{ type: 'ip-address', targets: 4 }
]
} );
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo Sort IP Addresses</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
<!-- the IP address sorting plug-in: -->
<script src="https://cdn.datatables.net/plug-ins/1.11.3/sorting/ip-address.js"></script>
<!-- not required, just used for some extra table styling: -->
<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 id=name>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th id=ipaddress sType=string-ip>IP-Address</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>10.29.0.36</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>172.29.0.78</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>172.29.0.98</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>172.29.0.47</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>172.29.0.56</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>172.29.0.2</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>172.29.0.223</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>172.29.0.20</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>172.29.0.13</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>172.29.0.113</td>
<td>$103,600</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>IP-address</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</html>
</div>
</body>
</html>
I want to filter the data on my data tables using the filter() API as described in the docs. The filtering works in terms that the data is filtered, but I am not finding a way to update the table with the filtered data. I want all employees with age less or equal to 40
My HTML code:
<table id="myTable" class="display" 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>24</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>40</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>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>64</td>
<td>2011/04/25</td>
<td>$320,800</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>
</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>
My JavaScript (I am using Jquery):
$(document).ready( function () {
let table = $('#myTable').DataTable();
$('#filterTable').click(function () {
let filteredData = table
.column(3)
.data()
.filter(function (value) {
return value <= 40;
});
});
});
Because Datatables filter()
... uses of the fact that DataTables API objects are
"array like", in that they inherit a lot of the abilities and methods
of the Javascript Array type.
...but I am not finding a way to update the table with the filtered
data.
In order to update the table with filtered values I suggest to add a .search() of found values with a final .draw().
table.column(3).search(filteredData.join('|'),true, false).draw();
The snippet:
let table = $('#myTable').DataTable();
$('#filterTable').click(function () {
let filteredData = table
.column(3)
.data()
.filter(function (value) {
return value <= 40;
});
// next line added...............
table.column(3).search(filteredData.join('|'),true, false).draw();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<button id="filterTable">filterTable</button>
<table id="myTable" class="display" 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>24</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>40</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>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>64</td>
<td>2011/04/25</td>
<td>$320,800</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>
</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>
I want to hide groups of columns or select the ones to show or hide using buttons in my datatable. This is my javascript code:
$('#doentes').DataTable({
"ajax" : "phpcode.php",
"columns" : [
{
"data" : "item1"
}, {
"data" : "item2"
}, {
"data" : "item3"
}, {
"data" : "item4"
}, {
"data" : "item5"
}],
"scrollX": true,
"orderFixed": [[ 1, "asc"],[ 2, "asc"],[ 3, "asc"]]
});
I can't get the hiding buttons to work, i've tried some examples without success, like:
dom: 'Bfrtip',
buttons: [
'colvis'
]
and
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Group 1',
show: [ 1, 2 ],
hide: [ 3, 4 ]
},
{
extend: 'colvisGroup',
text: 'Group 2',
show: [ 3, 4 ],
hide: [ 1, 2 ]
},
{
extend: 'colvisGroup',
text: 'Group 3',
show: ':hidden'
}
]
How can I apply this to my code?
Edit:
my includes:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
No error appear on the console when i try those options, the only difference is that the dropdown with the option to show 10, 25,50 and 100 rows per page dissapear.
I do not see that you are including the needed library for colvis:
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.colVis.min.js"></script>
Please note - this property requires the Buttons extension for DataTables.
https://datatables.net/reference/button/colvis
As for:
the only difference is that the dropdown with the option to show 10, 25,50 and 100 rows per page dissapear.
For this on the dom option set it like:
dom: 'Blfrtip'
Where 'l' is the length dropdown: https://datatables.net/examples/basic_init/dom.html
So as resume here an example (a really basic one):
$(document).ready(function() {
$('#example').DataTable({
dom: 'Blfrtip',
buttons: [
'colvis'
]
});
});
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.colVis.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<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>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>
</tbody>
</table>
I've being trying to implement data table,but its not working.Checking with my google chrome debugger;it returns error that "Cannot read property 'each' of null".I've been trying to debug this but am not getting it through.
here is a reference to the website, to see examples http://www.datatables.net/release-datatables/examples/api/multi_filter.html
Below here is the code:
sortable.js
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} );
index.html
<html>
<head>
<!--INCLUDE JQUERY-->
<script type="text/javascript" src="{{JS('jquery-1.11.0.min.js')}}"></script>
<!--INCLUDE DATAtABLE JQUERY RESOURCE-->
<script type="text/javascript" src="{{JS('jquery.dataTables.min.js')}}"></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>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>
</tbody>
</table>
</body>
</html>
THANKS IN ADVANCE
i actually required the sortable in my master file coz am using laravel,and when i did enter $('#example tfoot th') into my console it returned an array of this:
[
Name
,
Position
,
Office
,
Age
,
Start date
,
Salary
]
but looking at the source file on the debugger i discovered that the error is shown on the line where i have "table.columns().eq( 0 ).each( function ( colIdx )".
but am sorry i dont get the part of the breakpoint; cuz what i tried is to add "break;" after the line
open the page in Chrome's Web Developer Tools and go to console (or simply press esc). Enter:
$('#example tfoot th')
and press enter. See what it evaluates to. If it can't find any elements, then there's your problem. Considering the html you supplied, I doubt this is going to be your problem (unless you have a more serious problem with jQuery and where it looks).
Therefor, the problem should be on the second .each(). Go to sources in Web Developer Tools, open sortable.js file and put a breakpoint on the line with
table.columns().eq( 0 ).each( function ( colIdx )
and refresh the page. Once the breakpoint has been hit, enter in the console:
table.columns()
and see what it evaluates to. My guess is it's going to be null.
I don't see where you've included sortable.js. Did you include it after requiring dataTables.min.js?