Iterate DataTable() to get td value of every row - javascript

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>

Related

How to vertical-align dataTable

I am trying to vertical-align my dataTable, here is my table:
$(document).ready(function() {
$('#example').DataTable();
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<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>
<th>Country</th>
<th>Town</th>
<th>School</th>
<th>Degree</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>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</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>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
</table>
</div>
What am trying to achieve is this:
Instead of horizontal alignment, I want to achieve vertical alignment: Can I achieve something like that? I didn't find anything similar to this.
Can anybody try to help me with this?

You can the table content to:
<div class="container">
<table id="example" class="display" style="width:100%">
<tr>
<th>Name</th>
<td>Tiger Nixon</td>
<td>Garrett Winters</td>
</tr>
<tr>
<th>Position</th>
<td>System Architect</td>
<td>Accountant</td>
</tr>
<tr>
<th>Office</th>
<td>Edinburgh</td>
<td>Tokyo</td>
</tr>
<tr>
<th>Age</th>
<td>61</td>
<td>63</td>
</tr>
<tr>
<th>Start date</th>
<td>2011/04/25</td>
<td>2011/07/25</td>
</tr>
<tr>
<th>Salary</th>
<td>$320,800</td>
<td>$170,750</td>
</tr>
<tr>
<th>Country</th>
<td>UK</td>
<td>UK</td>
</tr>
<tr>
<th>Town</th>
<td>London</td>
<td>London</td>
</tr>
<tr>
<th>School</th>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<th>Degree</th>
<td>Phd</td>
<td>Phd</td>
</tr>
</table>
</div>

How to filter data on datatables using the filer API

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>

Unable to get Sum of Column values(Checkbox checked) using jQuery Datatables

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>

Datatable module is not working

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

Get a cell value from a row based on another cell value

i want to get the age of a particular name ,lets say i want to get the age of Garrett Winters , using jquery . the record can be at any row of the table.i have to search the whole table and get the corresponding age in a variable..
i want to search the column Name for a particular value and get the corresponding age
<table id="table1" border="1" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Status</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>CNF</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>CNF</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>CNF</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>TMP</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>CNF</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>TMP</td>
</tr>
</tbody>
</table>
i m new to jquery .Help me out

You can do something like this. It works for me. Demo
$(document).ready(function(){
var nameToSearch ="Tiger Nixon";
$('table tr').each(function(){
if($(this).find('td').eq(0).text() == nameToSearch)
alert("Age of "+nameToSearch+" is "+$(this).find('td').eq(3).text());
});
});
I hope it helps you.

Use :contains Psudeo selector in jquery. Get the age of the 'Garrett Winters'
var serachName = 'Garrett Winters';
$("table tbody tr td:contains("+serachName+")").parent().find('td:eq(3)').text()
Fiddle

Categories

Resources