i am using DataTables library to manage some tables data. Currently datatable items get selected as per click on anywhere of row. But my goal is row will be selected by input check class named- "checkItem". Is it possible with DataTables library? Note: I already tried to replace className: 'select-checkbox' with className: 'checkItem' but no luck. Please help
Javascript:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'multi',
//selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
} );
} );
</script>
Html:
<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><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1" /></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1" /></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>$170,750</td>
</tr>
<tr>
<td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="2" /></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>$86,000</td>
</tr>
<tr>
<td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="3" /></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
</tr>
<tr>
<td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="4" /></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>$162,700</td>
</tr>
<tr>
<td><input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="5" /></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>$372,000</td>
</tr>
</tbody>
</table>
You can get the parent of the clicked checkbox and then add class to the element. Here is the jsfiddle.
<table width="100%" id="example">
<thead style="background:#C0C0C0;">
<tr>
<th colspan="5">first headline</th>
</tr>
<tr>
<th> check box </th>
<th style="padding-left: 15px;"> Id </th>
<th> Product Name </th>
<th> Total Events </th>
<th> Total Revenue </th>
<th> Rental Time </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="selectrow"></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>$372,000</td>
<td>New York</td>
<td>4804</td>
</tr>
<tr>
<td><input type="checkbox" class="selectrow"></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>$137,500</td>
<td>San Francisco</td>
<td>9608</td>
</tr>
</tbody>
</table>
<style>
.select-checkbox {
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
$(document).ready(function() {
var table = $('#example').DataTable();
$('.selectrow').on('click', function() {
if ($(this).parent().parent().hasClass('select-checkbox')) {
$(this).parent().parent().removeClass('select-checkbox');
} else {
table.$('tr.select-checkbox').removeClass('select-checkbox');
$(this).parent().parent().addClass('select-checkbox');
}
});
});
Related
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>
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);
});
Unable to get Sum of Column values(Checkbox checked) using jQuery Datatables. I'm trying to add sum of amount columns dynamically. If we uncheck amount will reduce automatically. I tried below code. Could you please suggest what could be the issue
$(document).ready(function() {
var creditAmount =0
$('#firstTable').DataTable();
$("#firstTable").on('change', function(){
var checkedCount = $("#firstTable input:checked").length;
for (var i = 0; i < checkedCount; i++) {
var amount = $(this).find('td:eq(4)').text();
alert(amount);
if (amount != "") {
creditAmount += parseFloat(amount);
} else {
creditAmount = 0;
}
}
$("#idSmofAmount").text(creditAmount);
});
} );
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<div>
Count:: <span ="idSmofAmount"></span>
</div>
<table id="firstTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th><input type="checkbox"/></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Amount</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th><input type="checkbox"/></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><input type="checkbox"/></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><input type="checkbox"/></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><input type="checkbox"/></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><input type="checkbox"/></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><input type="checkbox"/></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><input type="checkbox"/></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><input type="checkbox"/></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><input type="checkbox"/></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>
</tbody>
</table>
Found few issues in your code:
You refer to the first element of the table via this reference inside the amount variable
The creditAmount doesn't reset when the change event is triggered
The ID of the span element used to display the count wasn't properly defined
Code:
$(document).ready(function() {
var creditAmount = 0
$('#firstTable').DataTable();
$("#firstTable").on('change', function() {
var checkedCount = $("#firstTable input:checked").length;
var creditAmount = 0
for (var i = 0; i < checkedCount; i++) {
var amount = $("#firstTable input:checked")[i].parentNode.parentNode.children[4].innerHTML
if (amount != "") {
creditAmount += parseFloat(amount);
} else {
creditAmount = 0;
}
}
$("#idSmofAmount").text(creditAmount);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<div>
Count::
<span id="idSmofAmount"></span>
</div>
<table id="firstTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Amount</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th><input type="checkbox" /></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><input type="checkbox" /></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><input type="checkbox" /></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><input type="checkbox" /></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><input type="checkbox" /></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><input type="checkbox" /></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><input type="checkbox" /></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><input type="checkbox" /></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><input type="checkbox" /></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>
</tbody>
</table>
I used datatables module and try to implement my database data to display in place of default data but it is not working properly.Is there any problem while calling my database data.
Datatables module code
function filterGlobal () {
$('#example').DataTable().search(
$('#global_filter').val()
).draw();
}
$(document).ready(function() {
$('#example').DataTable();
$('input.global_filter').on( 'keyup click',function () {
filterGlobal();
});
});
<table id="example" 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>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>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
This code is to import database data from mongodb by removing the default data
function filterGlobal () {
$('#example').DataTable().search(
$('#global_filter').val()
).draw();
}
$(document).ready(function() {
$('#example').DataTable();
$('input.global_filter').on( 'keyup click',function () {
filterGlobal();
});
});
class Search extends React.Component {
constructor(props){
super(props);
this.state={
users:[],
isLoaded:false,
errorOnLoad:false,
};
}
getuser(){
fetch('/api/users/getuser',{
method:'get'
})
.then((response)=>{
return response.json()
})
.then((data)=>{
this.setState({
users:data,
isLoaded:true,
err:{},
errorOnLoad:false,
});
this.getuser.bind();
})
.catch((err)=>{
this.setState({
err:err,
errorOnLoad:true
})
})
}
componentDidMount(){
this.getuser();
}
<div>
<h2 className="contact-table">CONTACT LIST</h2>
<div>
<table id="example" className="display" style= {{width:'100%'}}>
<thead>
<tr>
<th>Create Date</th>
<th>Name</th>
<th>Email Address</th>
<th>Mobile Number</th>
<th>Message</th>
<th>Profile Photo</th>
</tr>
</thead>
<tbody>
{
this.state.users.map((user)=>(
<tr key={user.qid}>
<td>{user.createDate}</td>
<td>{user.name}</td>
<td>{user.emailAddress}</td>
<td>{user.mobileNumber}</td>
<td>{user.message}</td>
<td><img className="image-db" src={user.image} alt="" /></td>
</tr>
))
}
</tbody>
<tfoot>
<tr >
<th>Create Date</th>
<th>Name</th>
<th>Email Address</th>
<th>Mobile Number</th>
<th>Message</th>
<th>Profile Photo</th>
</tr>
</tfoot>
</table>
</div>
</div>
When using datatables module code output
When tried to get data from database data is appearing but it is also displaying that NO DATA AVAILABLE IN TABLE and also DATATABLES MODULE IS NOT WORKING
Can anyone find the solution for it.
Thank you
I have created a table with DataTable() plugin: DataTable
Every row has a td with "amount" class.
I want to iterate all rows to get all td values and save the sum into a variable.
I found this: each(), but I don't know how to integrate it.
UPDATE: code generated by DataTable()
<table id="table">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>World</td>
<td class="amount">346.387,81</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
<td class="amount">444.392,35</td>
</tr>
</tbody>
</table>
You can use:
var totalamount = 0;
$('#table td.amount').each(function(){
totalamount += parseFloat($(this).text().replace(",",""),10)
});
Working Demo
In their documentation, there is an example that does exactly what you want to achive.
Take a look at the snippet below:
$(function() {
$('#example').DataTable({
footerCallback: function(row, data, start, end, display) {
var api = this.api();
function intVal(i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ?
i : 0;
};
// Total over this page
var total = api
.column(1, {
page: 'current'
})
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
});
// Update footer
$(api.column(1).footer()).html(
total
);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" cellspacing="0" width="80%">
<thead>
<tr>
<th>Name</th>
<th>Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Amount</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
</table>
This will parse the entire dataset and return the total:
$(document).ready(function() {
console.clear();
var oTable = $('#example').dataTable();
var rows = oTable.fnSettings().aoData;
var columnIndex = 1;
var total = 0;
$.each(rows, function(i, val) {
total += parseFloat(val._aData[columnIndex].replace(/,/g, ""));
});
alert(total);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" cellspacing="0" width="80%">
<thead>
<tr>
<th>Name</th>
<th>Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Amount</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>433,060</td>
</tr>
</table>