I have code with a .on click event and that works fine. However, if I change it to window load or doc ready, it displays ‘data in row’ even though there is no data. I am confused as to why it works on click event and not on load. Comments would be appreciated as this is driving me nuts. Many thanks
This works
$('#nirqst').on('click', 'tr', function () {
var table = $('#nirqst').DataTable();
//get the current row
var currentRow = $(this).closest("tr");
var col1 = currentRow.find(".dataTables_empty").html();
if((col1)=='No data available in table') {
console.log(col1);
table.buttons().disable();
} else {
console.log('data in row');
table.buttons().enable();
}
});
This dosen’t
$( window ).on( "load", function() {
var table = $('#nirqst').DataTable();
//get the current row
var currentRow = $(this).closest("tr");
var col1 = currentRow.find(".dataTables_empty").html();
if((col1)=='No data available in table') {
console.log(col1);
table.buttons().disable();
} else {
console.log('data in row');
table.buttons().enable();
}
});
Generated html table
<table class="display stripe dataTable no-footer" id="nirqst" role="grid" aria-describedby="nirqst_info" width="100%" cellspacing="0">
<!-- <caption>New Intake Requests</caption>-->
<thead>
<tr role="row">
<th style="width: 4%;" class="hide_id sorting_disabled" rowspan="1" colspan="1" aria-label="ID#">ID#</th>
<th style="width: 4%;" class="hide_id sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="ID Number: activate to sort column ascending">ID Number</th>
<th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" style="width: 20px;" aria-label="Select-->: activate to sort column ascending">Select
<!--<input type="checkbox" id="select_all" name="select_intake" />-->
</th>
<th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" style="width: 40px;" aria-label="Service: activate to sort column ascending">Service</th>
<th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Activity: activate to sort column ascending">Activity</th>
<th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Dept: activate to sort column ascending">Dept</th>
<th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Company: activate to sort column ascending">Company</th>
<th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" style="width: 160px;" aria-label="Address: activate to sort column ascending">Address</th>
<th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="User: activate to sort column ascending">User</th>
<th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Box#: activate to sort column ascending">Box#</th>
<th class="sorting" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Destroy Date: activate to sort column ascending">Destroy Date</th>
<th class="sorting_desc" tabindex="0" aria-controls="nirqst" rowspan="1" colspan="1" aria-label="Request Date: activate to sort column ascending" aria-sort="descending">Request Date</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 110px;" aria-label="Action">Action</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td colspan="11" class="dataTables_empty" valign="top">No data available in table</td>
</tr>
</tbody>
</table>
I think the problem is $(this) which is referring to the window in the second case. you should try this
$( window ).on( "load", function() {
$('#nirqst tr').each(function () {
var table = $('#nirqst').DataTable();
var col1 = $(this).find(".dataTables_empty").html();
if((col1)=='No data available in table') {
console.log(col1);
table.buttons().disable();
} else {
console.log('data in row');
table.buttons().enable();
}
});
});
try, that should fire when the DOM is loaded.
jQuery.ready(function(){
console.log("DOM loaded");
});
Related
Following the advice in this post I have created a table that can filter based on any column.
How to filter a html table using simple javascript?
But what I would like to do is use something simple like the document ready function to create a search bar over each column so that when you search it it only applies to that column.
Is a simple solution possible with only the document ready function?
I created a version before using CSS and special tags in each column, but this had issues depending on how I later tried to format the table.
$(document).ready(function() {
$('#permits').DataTable({
"pagingType": "full_numbers",
"order": [
[1, "asc"]
]
});
});
<div class="panel panel-primary filterable">
<table border="1" class="table dataTable no-footer" id="permits" role="grid" aria-describedby="permits_info" style="width: 1612px;">
<thead>
<tr style="text-align: right;" role="row">
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Project ID: activate to sort column ascending" style="width: 65px;">Project ID</th>
<th class="sorting_asc" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Company: activate to sort column descending" style="width: 64px;">Company</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Permit Engineer: activate to sort column ascending" style="width: 114px;">Permit Engineer</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Application Recieved: activate to sort column ascending" style="width: 77px;">Application Recieved</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Current Project Status: activate to sort column ascending" style="width: 212px;">Current Project Status</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 55px;">Status</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Address: activate to sort column ascending" style="width: 62px;">Address</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="CITY: activate to sort column ascending" style="width: 32px;">CITY</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="STATE: activate to sort column ascending" style="width: 44px;">STATE</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="ZIP: activate to sort column ascending" style="width: 55px;">ZIP</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="COUNTY: activate to sort column ascending" style="width: 60px;">COUNTY</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="E_PHONE: activate to sort column ascending" style="width: 67px;">E_PHONE</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="E_EMAIL: activate to sort column ascending" style="width: 125px;">E_EMAIL</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Most Recent Update: activate to sort column ascending" style="width: 48px;">Most Recent Update</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>N142250004</td>
<td class="sorting_1">Quick Draw Inc.- Firearms Range</td>
<td>John Person<br>999-999-9999- jperson#website.com</td>
<td>2021-09-02</td>
<td>NOI_DATE</td>
<td>Reviewing Application</td>
<td>111 S Mountain Vista Parkway</td>
<td>Provo</td>
<td>UT</td>
<td>84601</td>
<td>Utah</td>
<td>999-999-9999</td>
<td>jperson#website.com</td>
<td>2021-09-02 16:50:24</td>
</tr>
<tr role="row" class="even">
<td>N149200002</td>
<td class="sorting_1">Storage - Facility</td>
<td>Jake A. Guy<br>(999) 999-9999 - jguy#website.com</td>
<td>2020-09-15</td>
<td>PUBLIC_COMMENT_START_DATE</td>
<td>Released for Public Comment</td>
<td>In the middle of the salt lake</td>
<td>Salt Lake City</td>
<td>UT</td>
<td>84104</td>
<td>Salt Lake</td>
<td>999-999-9999</td>
<td>jguy#website.com</td>
<td>2021-10-14 10:20:02</td>
</tr>
</table>
</div>
You can filter by column with Datatables library, you just need to specify the column and use the method search and draw and create the filter input with the column id that you want to filter, like this:
$(document).ready(function() {
$('#permits').DataTable( {
"pagingType": "full_numbers",
"order": [[ 1, "asc" ]]
});
$('#filter-boxes input').on( 'keyup', function () {
var col = $(this).data("col");
$('#permits').DataTable().column( col ).search( $(this).val() ).draw();
} );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet"/>
<div class="panel panel-primary filterable">
<div id="filter-boxes">
<input data-col="0" type="text" placeholder="Search Project ID">
<input data-col="1" type="text" placeholder="Search Company">
<input data-col="2" type="text" placeholder="Search Permit Engineer">
<input data-col="3" type="text" placeholder="Search Application Recieved">
<input data-col="4" type="text" placeholder="Search Current Project Status">
<input data-col="5" type="text" placeholder="Search Status">
<input data-col="6" type="text" placeholder="Search Address">
<input data-col="7" type="text" placeholder="Search CITY">
<input data-col="8" type="text" placeholder="Search STATE">
<input data-col="9" type="text" placeholder="Search ZIP">
<input data-col="10" type="text" placeholder="Search COUNTY">
<input data-col="11" type="text" placeholder="Search E_PHONE">
<input data-col="12" type="text" placeholder="Search E_EMAIL">
<input data-col="13" type="text" placeholder="Search Most Recent Update">
</div>
<table border="1" class="table dataTable no-footer" id="permits" role="grid" aria-describedby="permits_info" style="width: 1612px;">
<thead>
<tr style="text-align: right;" role="row">
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Project ID: activate to sort column ascending" style="width: 65px;">Project ID</th>
<th class="sorting_asc" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Company: activate to sort column descending" style="width: 64px;">Company</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Permit Engineer: activate to sort column ascending" style="width: 114px;">Permit Engineer</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Application Recieved: activate to sort column ascending" style="width: 77px;">Application Recieved</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Current Project Status: activate to sort column ascending" style="width: 212px;">Current Project Status</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 55px;">Status</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Address: activate to sort column ascending" style="width: 62px;">Address</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="CITY: activate to sort column ascending" style="width: 32px;">CITY</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="STATE: activate to sort column ascending" style="width: 44px;">STATE</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="ZIP: activate to sort column ascending" style="width: 55px;">ZIP</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="COUNTY: activate to sort column ascending" style="width: 60px;">COUNTY</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="E_PHONE: activate to sort column ascending" style="width: 67px;">E_PHONE</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="E_EMAIL: activate to sort column ascending" style="width: 125px;">E_EMAIL</th>
<th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Most Recent Update: activate to sort column ascending" style="width: 48px;">Most Recent Update</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>N142250004</td>
<td class="sorting_1">Quick Draw Inc.- Firearms Range</td>
<td>John Person<br>385-555-6503 - jpersons#example.com</td>
<td>2021-09-02</td>
<td>NOI_DATE</td>
<td>Reviewing Application</td>
<td>111 S Mountain Vista Parkway</td>
<td>Provo</td>
<td>UT</td>
<td>84601</td>
<td>Utah</td>
<td>999-555-9999</td>
<td>jperson#example.com</td>
<td>2021-09-02 16:50:24</td>
</tr>
<tr role="row" class="even">
<td>N149200002</td>
<td class="sorting_1">Storage - Facility</td>
<td>Jake A. Guy<br>(385) 555-6530 - jries#example.com</td>
<td>2020-09-15</td>
<td>PUBLIC_COMMENT_START_DATE</td>
<td>Released for Public Comment</td>
<td>In the middle of the salt lake</td>
<td>Salt Lake City</td>
<td>UT</td>
<td>84104</td>
<td>Salt Lake</td>
<td>999-555-9999</td>
<td>jries#example.com</td>
<td>2021-10-14 10:20:02</td>
</tr>
</tbody>
</table>
</div>
I'm trying to use data-tables features after the information have been injected into the table itself upon jquery post. The HTML markup for table is:
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 70px;" aria-label="First name: activate to sort column ascending">Store Name</th>
<th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 268px;" aria-label="" aria-sort="ascending">Comment</th>
<th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width:18px;" aria-label="Last name: activate to sort column descending" aria-sort="ascending">Your Rating</th>
<th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 18px;" aria-label="Last name: activate to sort column descending" aria-sort="ascending">Seller Feedback</th>
<th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 18px;" aria-label="Last name: activate to sort column descending" aria-sort="ascending">Delete</th>
</thead>
<tbody>
#if (ViewBag.Products != null)
{
foreach (var item in ViewBag.Products)
{
<tr role="row" class="odd">
<td class="" tabindex="0">#item.SaleNumber</td>
<td class="sorting_1">#item.SaleNumber</td>
<td class="sorting_1">#item.SaleNumber</td>
<td class="sorting_1">#item.SaleNumber</td>
<td class="sorting_1 deleteAction"><i class="fa fa-close"></i></td>
</tr>
}
}
</tbody>
</table>
The table is initially empty upon the page load... This is where I inject the data into the table when the post is done like following:
var dbtb = $('<table />').append(data).find('#datatable-responsive').html();
$('#datatable-responsive').html(dbtb);
But the table is completely unresponsive, I can't use any of its features, is there any way to let it know that I injected the data into it ??
I am working on one table that is created using datatables. Now I want to set last td value using jquery. I tried different codes but no luck like this.
<script type="text/javascript">
$(document).ready(function() {
$('#productsTable tr').each(function() {
alert($(this).closest('tr').children('td.two').text());
// alert($(this).closest('tr').find('td:eq(11)').text());
});
});
</script>
I didn't get the proper value of last td. My table html is:
<table class="display table table-bordered table-striped dataTable" id="productsTable" aria-describedby="productsTable_info">
<thead>
<tr role="row">
<th class="sorting_desc" tabindex="0" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending" style="width: 45.777777671814px;">Date</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Auction: activate to sort column ascending" style="width: 75.777777671814px;">Auction</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Bid no: activate to sort column ascending" style="width: 62.777777671814px;">Bid no</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 55.777777671814px;">Name</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Chassis No: activate to sort column ascending" style="width: 107.777777671814px;">Chassis No</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Year: activate to sort column ascending" style="width: 46.777777671814px;">Year</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Color: activate to sort column ascending" style="width: 53.777777671814px;">Color</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Mileage: activate to sort column ascending" style="width: 75.777777671814px;">Mileage</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Score: activate to sort column ascending" style="width: 58.777777671814px;">Score</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="Bid: activate to sort column ascending" style="width: 35.777777671814px;">Bid</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="End Price: activate to sort column ascending" style="width: 95.777777671814px;">End Price</th>
<th class="sorting_disabled" tabindex="0" rowspan="1" colspan="1" aria-label="Result" style="width: 63.777777671814px;">Result</th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class=" sorting_1">2015-05-08</td>
<td class="">SAA Sapporo</td>
<td class="">3005</td>
<td class="">FIT SHUTTLE</td>
<td class=""></td>
<td class="">2012</td>
<td class="">WHITE</td>
<td class="">23</td>
<td class="">4.5</td>
<td class="">0</td>
<td class="">0</td>
<td class="">1</td>
</tr>
<tr class="even">
<td class=" sorting_1">2015-05-08</td>
<td class="">SAA Sapporo</td>
<td class="">55097</td>
<td class="">PIXIS EPOCH</td>
<td class=""></td>
<td class="">2012</td>
<td class="">.....</td>
<td class="">8</td>
<td class="">4.5</td>
<td class="">0</td>
<td class="">0</td>
<td class="">0</td>
</tr>
</tbody>
</table>
I am trying to set the result values like if 1 then winner and 2 then losre etc., but issue is I am not getting the value of last td. What I am doing wrong.
You need to use :last selector along with td elements object:
$('#productsTable tr:has(td)').each(function() {
alert($(this).find('td:last').text());
});
This will alert the text of each last td element in trs.
Since you are using data tables, it will be better to use the datatables api
$('#productsTable tbody tr td:last-child').each(function () {
var cell = table.cell(this),
data = cell.data();
if (data == 1) {
cell.data('Winner');
} else if (data == 0) {
cell.data('Lost');
}
})
Demo: Fiddle
I have a shift.js and shift_view.php
in shift_view.php:
<div style="float:left;width:1200px;">
<div style="float:left;width:800px;">
<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="main_table" aria-describedby="example_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Select</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">ID</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Region</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Description</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Start Time</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">End Time</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">$/hr</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Ride Bonus</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Ride Bonus Rate</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Drivers</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Edit Shift</th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
</tbody>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
which sets the first row of the table,
and in shift.js:
for(var i = 0; i < 2; i++){
var shift = response[i];
var arr = [ I_NEED_A_CHECK_BOX_VAR,
shift.ID,
regions[shift.RegionID],
shift.Description,
shift.StartStr,
shift.EndStr,
parseFloat(shift.GuaranteeRate).toFixed(2).toString(),
parseFloat(shift.RideBonus).toFixed(2).toString(),
parseFloat(shift.RideBonusRate).toFixed(2).toString(),
shift.NumDrivers.toString() + " / " + shift.DriversNeeded,
'<font size="6" color="green"><b><a style="text-decoration:none" href="/shift/editShift/'+shift.ID+'">Edit</a></b></font>'];
if(parseInt(shift.NumDrivers) < 0.75 * parseInt(shift.DriversNeeded)){
arr[arr.length-2] = '<font color="red"><b>' + arr[arr.length-2] + '</b></font>';
}
if(shift.StartTimestamp*1000 < Date.now() && Date.now() < shift.EndTimestamp*1000 ){
arr[0] = '<font size="6" color="green"><b>' + arr[0] + '</b></font>';
}
$('#main_table').dataTable().fnAddData(arr);
The js will populate the data to the view. what should i do to "I_NEED_A_CHECK_BOX_VAR" to make it a checkbox?
My task is to make each row selectable so when a 'submit' button is clicked, the selected row's shift.ID will be send to another function in an array.
From all the researches, I could only find that a checkbox is made in the html(view) since the view actively calles function to get data, but in this case, the view isn't, it is the js that updates the view.
thanks for all your help!!
Luke
its solved!
I_NEED_A_CHECK_BOX_VAR = '<input type="checkbox" name="checkbox" id="checkbox_' + shift.ID + '" class="r1" />'
hope it helps anyone
I have dataTable with this html:
<table id="example" class="table table-striped table-bordered table-responsitive dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
<thead>
<tr role="row"><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Naziv: activate to sort column ascending" style="width: 44px;">Naziv</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Povrsina: activate to sort column ascending" style="width: 69px;">Povrsina</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Lokacija: activate to sort column ascending" style="width: 67px;">Lokacija</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Osnov: activate to sort column ascending" style="width: 53px;">Osnov</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Kultura: activate to sort column ascending" style="width: 59px;">Kultura</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Seme-sadnice: activate to sort column ascending" style="width: 109px;">Seme-sadnice</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Radnici $: activate to sort column ascending" style="width: 74px;">Radnici $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Gorivo $: activate to sort column ascending" style="width: 68px;">Gorivo $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Inputi $: activate to sort column ascending" style="width: 61px;">Inputi $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Ukupno $: activate to sort column ascending" style="width: 77px;">Ukupno $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Dobit $: activate to sort column ascending" style="width: 58px;">Dobit $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="ROI %: activate to sort column ascending" style="width: 49px;">ROI %</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="width: 85px;"></th></tr>
</thead>
<tfoot>
<tr><th rowspan="1" colspan="1">Parcela</th><th rowspan="1" colspan="1">5.0607</th><th rowspan="1" colspan="1">Lokacija</th><th rowspan="1" colspan="1">Osnov</th><th rowspan="1" colspan="1">Kultura</th><th rowspan="1" colspan="1"></th><th rowspan="1" colspan="1">960</th><th rowspan="1" colspan="1">1355</th><th rowspan="1" colspan="1">1150</th><th rowspan="1" colspan="1">3465</th><th rowspan="1" colspan="1">17500</th><th rowspan="1" colspan="1">405</th><th rowspan="1" colspan="1"></th></tr>
</tfoot>
<tbody><tr role="row" class="odd"><td>prva</td><td>5.0607</td><td>ns</td><td>vlasnistvo</td><td>vocnjak</td><td>Breskva</td><td>960</td><td>1355</td><td>1150</td><td>3465</td><td>17500</td><td>405 %</td><td><div style="float:right;"><button class="btn btn-info" data-toggle="modal" data-target="#myModal1">Detalji...</button> <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i></div></td></tr></tbody></table>
How I can get values from table footer (value from columns radnici$, gorivo$, inputi$)?
I need this data to create chart with google visualisation... so I need:
var data = google.visualization.arrayToDataTable([
['aaa', 'bbb'],
['Radnici', here I need value from table footer of column radici],
['Gorivo', from column gorivo],
['Inputi', from column inputi],
]);
How to get this data?
HTML table: Fiddle
Use the following jQuery to access the values:
var radnici = $("tfoot th:nth-child(7)").text();
var gorivo = $("tfoot th:nth-child(8)").text();
var inputi = $("tfoot th:nth-child(9)").text();
After accessing the values, you may pass them to create a chart with google visualization.
Here's a DEMO.
You can give the footer TH's in question some IDs, and fetch the values by using jQuery:
<tfoot>
<tr>
<th rowspan="1" colspan="1">Parcela</th>
<th rowspan="1" colspan="1">5.0607</th>
<th rowspan="1" colspan="1">Lokacija</th>
<th rowspan="1" colspan="1">Osnov</th>
<th rowspan="1" colspan="1">Kultura</th>
<th rowspan="1" colspan="1"></th>
<th rowspan="1" colspan="1" id="radnici">960</th>
<th rowspan="1" colspan="1" id="gorivo">1355</th>
<th rowspan="1" colspan="1" id="inputi">1150</th>
<th rowspan="1" colspan="1">3465</th>
<th rowspan="1" colspan="1">17500</th>
<th rowspan="1" colspan="1">405</th><th rowspan="1" colspan="1"></th>
</tr>
</tfoot>
var radnici = Number($('#radnici').html());
var gorivo = Number($('#gorivo').html());
var inputi = Number($('#inputi').html());
console.log(radnici, gorivo, inputi);
var data = google.visualization.arrayToDataTable([
['aaa', 'bbb'],
['Radnici', radnici],
['Gorivo', gorivo],
['Inputi', inputi],
]);
http://jsfiddle.net/L3kh39t1/3/