Difference between node.innerHTML and cell.data() in DataTables - javascript

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>

Related

Datatables IP-address sorting "full example"

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>

How to make multiple conditions inside filter datatable jQuery

I Work with datatable library, and i have issues. In my page i have filtering menu, which generate filtering values depends of table header values.
When page start, i filter data, show only active values, if user want to see inactive he can press:
And user will see all values, but in case if i goo to main filters:
And choose some values, and try to make all values active or inactive filtering is not working. How i can solve this issues?
My code for filtering:
function drawTable(table, className, lenth) {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
return $(table.row(dataIndex).node()).find(className).length == lenth;
}
);
table.draw();
}
$(document).ready(function () {
var table = $('#' + tableId + '').DataTable();
if ($(".fa").hasClass("fa-eye")) {
drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
}
$(".fa-eye-slash").click(function () {
$(".fa-visibles").removeClass('hide');
$(".fa-invisibles").addClass('hide');
$.fn.dataTable.ext.search.pop();
table.draw();
});
$(".fa-eye").click(function () {
$(".fa-visibles").addClass('hide');
$(".fa-invisibles").removeClass('hide');
drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
});
});
JSFIDDLE
Whe u tap on filtering icon, chosee for example "Office -> Regional Director", on table 3 values, but showing only two, i want to cancel this filter and tap on eye, but this not work.

You asked for an example - and I assumed you meant an example using the panes techniques I mentioned, so I have provided one below. However I do still think you may want to consider using the search builder, instead.
My example does the following:
(1) It uses a pane for the first column. The table column shows the "check" and "cross" symbols, but the filter pane uses the words "active" and "inactive".
(2) It opens the table with only "active" records selected, at the start.
I made the following changes:
(a) Changed the HTML source data to use <td>active</td> and <td>inactive</td>, instead of embedding the fontawesome symbols in the HTML table.
(b) Added a render function to handle how the first column is displayed in the table (using the FA symbols instead of the words).
(c) Added logic to handle how the search pane uses this data in the first column.
(d) Pre-selected only "active" records.
I removed all your other logic.
This means the page shows every search pane (just for my demo) - so you may want to restore your logic to hide and show specific search panes, as needed, using your checkboxes. Otherwise the panes take up too much space in the page (in my demo).
Here is the demo:
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'Plfrtip',
columnDefs: [
{
targets: 0, // the first column needs custom handling:
render: function ( data, type, row, meta ) {
if ( type === 'display' ) { // show symbols, instead of table data:
if (data === 'active') {
return '<em class="fa fa-check pointer fa-active"></em>';
} else {
return '<em class="fa fa-close pointer fa-inactive"></em>';
}
} else { // all other types, including "filter" and "sort"
return data;
}
},
searchPanes: {
show: true,
orthogonal: {
// For the search pane, use the "filter" data from the above
// render function. In this case, that is the original raw
// data from the table.
display: 'filter'
},
preSelect: ['active']
}
},
{
targets: "_all", // all remaining filter panes are also shown:
searchPanes: {
show: true,
initCollapsed: true
}
}
]
} );
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!--
<script src="https://code.jquery.com/jquery-3.5.0.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">
-->
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/1.0.1/js/dataTables.searchPanes.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/1.0.1/css/searchPanes.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.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" style="width:100%">
<thead>
<tr>
<th>Status</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> inactive</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>active</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>active</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> inactive</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>active</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>active</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>active</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>active</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>active</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>active</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>active</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>active</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>active</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>
<tr>
<td>inactive</td>
<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>inactive</td>
<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>inactive</td>
<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> inactive</td>
<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> inactive</td>
<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> inactive</td>
<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>inactive</td>
<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>active</td>
<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>active</td>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>active</td>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>active</td>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>active</td>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>active</td>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>active</td>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

According your code JSFiddle, all your code are working fine. Multiple Conditions does not work because your logic are wrong.
Let me explain.
Active and inactive condition is working with current table's data.
First, table's data have all data (active and inactive). You can
filter like "Office -> Regional Director", you can found 3
record. And then you can click Active and inactive condition event.
It will work correctly.
Second, you hide some inactive data from
table, it have only active data in your table.And then, you filter
like "Office -> Regional Director". You can only found 2 record,
cannot show inactive record because current table's data doesn't have
inactive data.
Solution:
you should adjust your code when call filter function, your must reload all table data first and then your can call filter process with all data.
when finish filter data, you must check active or inactive conditions.
Example Code, Based on your provided code. I hope you will understand.
let tableId = "example";
$('.filtering-system').hide();
$('.button-container').hide();
addSpliting('');
function showAllVaues() {
$('#' + tableId + '').dataTable().api().pagae.len(-1).draw();
}
function addSpliting(val, length) {
if (val != '') {
//start Reload- Before Filter event, need to reload all data
var table = $('#' + tableId + '').DataTable();
$.fn.dataTable.ext.search.pop();
table.draw();
//end Reload
$('#' + tableId + '').DataTable({
destroy: true,
searchPanes: {
layout: 'columns-' + length + ''
},
columnDefs: [{
searchPanes: {
show: true
},
targets: '_all'
}],
dom: 'Pfrtip'
});
$('.dtsp-searchPanes').children().each(function (i, obj) {
if (!val.includes(i)) $(this).hide();
else $(this).show();
});
//start check - When get filter data, need to check active or not
if ($(".fa").hasClass("fa-eye")) {
drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
}
//end check
} else {
$('#' + tableId + '').DataTable({
destroy: true
});
}
}
function setFilters() {
$("table thead tr th").each(function (index) {
var boxes = `<label>
<input type="checkbox" class="custom-checkbox" id="${index}"/>
${$(this).text()}
</label>`;
if ($(this).text() != "" && $(this).hasClass('checkbox-mark') === false) $(".checkBoxes").append(boxes);
});
}
setFilters();
$("#createFilter").on("click", function () {
var columFilters = [];
$('.custom-checkbox:checked').each(function () {
columFilters.push(parseInt($(this).attr('id')));
});
addSpliting(columFilters, columFilters.length);
});
$("#fil-sys").on("click", function () {
$('.filtering-system').slideToggle('slow');
});
function drawTable(table, className, lenth) {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
return $(table.row(dataIndex).node()).find(className).length == lenth;
}
);
table.draw();
}
$(document).ready(function () {
var table = $('#' + tableId + '').DataTable();
if ($(".fa").hasClass("fa-eye")) {
drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
}
$(".fa-eye-slash").click(function () {
$(".fa-visibles").removeClass('hide');
$(".fa-invisibles").addClass('hide');
$.fn.dataTable.ext.search.pop();
table.draw();
});
$(".fa-eye").click(function () {
$(".fa-visibles").addClass('hide');
$(".fa-invisibles").removeClass('hide');
drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
});
});

jQuery DataTable: thousands separator option doesn't work

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);
});

Need a bootstrap table code with checkbox on save button it need to return selected checkbox row

Need a bootstrap table code with row checkbox on save button it need to return selected checkbox row.

<button id="btnSelectedRows">
Get Selected Rows
</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</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>$86,000</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</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>$372,000</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>$137,500</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</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>$205,500</td>
</tr>
<tr>
<td></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>$103,600</td>
</tr>
<tr>
<td></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>$90,560</td>
</tr>
<tr>
<td></td>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</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>$470,600</td>
</tr>
<tr>
<td></td>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>$313,500</td>
</tr>
<tr>
<td></td>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>$385,750</td>
</tr>
<tr>
<td></td>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>$198,500</td>
</tr>
</tbody>
</table>
var table;
$(document).ready(function() {
table = $('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}, {
"targets": [2],
"visible": false,
"searchable": false
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
]
});
});
$('#btnSelectedRows').on('click', function() {
var tblData = table.rows('.selected').data();
var tmpData;
$.each(tblData, function(i, val) {
tmpData = tblData[i];
alert(tmpData);
});
})
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js">
fiddle

DataTable showing "Cannot read property 'each' of null"

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?

Categories

Resources