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>
Related
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 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'm trying to get the jquery datatable export buttons to display on an cshtml view in my MVC application.
The error is
0x800a01b6 - JavaScript runtime error: Object doesn't support property
or method 'i18n' Unhandled exception at line 13, column 363 in
http://localhost:52104/Scripts/buttons.html5.min.js which points to
the buttons.html5.min.js script text:function(a){return
a.i18n("buttons.excel","Excel")}
I created a proof of concept view just to see if the buttons would show up and work. The scripts are included in the BundleConfig.cs file
bundles.Add(new ScriptBundle("~/bundles/misc_scripts").Include(
"~/Scripts/autosize.js",
"~/Scripts/jquery.dataTables.min.js",
"~/Scripts/dataTables.bootstrap.js",
"~/Scripts/dataTables.responsive.min.js",
"~/Scripts/dataTables.buttons.min.js",
"~/Scripts/buttons.html5.min.js",
"~/Scripts/buttons.print.min.js",
"~/Scripts/jszip.min.js",
"~/Scripts/pdfmake.min.js",
"~/Scripts/vfs_fonts.js",
"~/Scripts/select2.min.js",
"~/Scripts/App/Shared.js"
<table id="example" class="display nowrap" 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>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
var table = $('#example').DataTable({
dom: 'Bfrtip',
buttons: ['excelHtml5']
});
});
</script>
Thanks for your help
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>
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