I am currently using this SB Admin as bootstrap UI.
I search for one of my problem and I found this one SO LINK. Below are my codes. I try to use the code in my link. But its not working.
var checkedRows = [];
$('#dataTables-SalesMenu').on('check.bs.table', function (e, row) {
debugger;
checkedRows.push({ id: row.id, name: row.name });
console.log(checkedRows);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<div class="col-sm-12">
<table class="table table-striped table-bordered table-hover table-responsive nowrap dataTable no-footer" role="grid" style="width: 100%;" id="dataTables-SalesMenu" aria-describedby="dataTables-SalesMenu_info">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="dataTables-SalesMenu" rowspan="1" colspan="1" aria-label="Menu: activate to sort column ascending" style="width: 400px;">
Name
</th>
<th class="sorting" tabindex="0" aria-controls="dataTables-SalesMenu" rowspan="1" colspan="1" aria-label="Menu: activate to sort column ascending" style="width: 180px;">
Position
</th>
<th class="alignRight sorting_desc" tabindex="0" aria-controls="dataTables-SalesMenu" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending" style="width: 180px;">
Party
</th>
<th class="alignCenter sorting_disabled" rowspan="1" colspan="1" aria-label="Add To Tray" style="width: 90px;">
Click to Vote
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>
Name
</td>
<td class="alignRight sorting_2">
Position
</td>
<td class="alignRight sorting_2">
Party
</td>
<td class=" alignCenter">
<center>
<label>
<input type="checkbox" value="" />
</label>
</center>
</td>
</tr>
<tr role="row" class="even" style="color: white; background-color: rgb(82, 136, 75);">
</tr>
</tbody>
</table>
</div>
<button id="buttonId">Heheheheh</button>
</div>
I try to search the .bs on my project but my problem is after a while of searching my VS is being NOT RESPONDING.
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 creating a script that will populate a graph with the selected data of an specific table row; the problem is I want to get the text inside of an <a> element, but I don't know how to retrieve the text between the <a> element (the bold one) because the onclick function is on an <i> element.
This is the code that is causing the problems:
**John Doe**
<i class="fas fa-chart-pie text-secondary" id="test1" onclick="myFunction(this.id)" data-toggle="modal" data-target="#exampleModal"></i>
Here is the fiddle with an example of what I'm trying to do.
https://jsfiddle.net/josema0890/fvnzdrcp/1/
HTML:
<table>
<thead>
<tr role="row">
<th class="text-left sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 138px;">Name</th>
<th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Country: activate to sort column ascending" style="width: 90px;">Country</th>
<th class="text-left sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Born Date: activate to sort column ascending" style="width: 63px;">BornDate</th>
<th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Loged?: activate to sort column ascending" style="width: 58px;">Loged?</th>
<th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Details: activate to sort column ascending" style="width: 146px;">Details</th>
<th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Maths: activate to sort column ascending" style="width: 48px;">Maths</th>
<th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Physics: activate to sort column ascending" style="width: 48px;">Physics</th>
<th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="Spanish: activate to sort column ascending" style="width: 48px;">Spanish</th>
<th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="P.E: activate to sort column ascending" style="width: 50px;">P.E</th>
<th class="text-center sorting_desc" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="StudentNumber: activate to sort column ascending" style="width: 61px;" aria-sort="descending">StudentNumber</th>
<th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="StudentCard: activate to sort column ascending" style="width: 90px;">StudentCard</th>
<th class="text-center sorting" tabindex="0" aria-controls="student_datatable" rowspan="1" colspan="1" aria-label="StudentSuperior: activate to sort column ascending" style="width: 57px;">StudentSuperior</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class=" text-left"> John Doe <i class="fas fa-chart-pie text-secondary" id="test1" onclick="myFunction(this.id)" data-toggle="modal" data-target="#exampleModal"></i></td>
<td class=" text-center">ESP</td>
<td class=" text-left">01/18/19</td>
<td class=" text-center">✘</td>
<td class=" text-center">% homework done</td>
<td class=" text-center" id="test1M">57.0%</td>
<td class=" text-center" id="test1F">50.0%</td>
<td class=" text-center" id="test1L">60.0%</td>
<td class=" text-center" id="test1EF">84.0%</td>
<td class="text-center sorting_1"><a style="" href="#" target="_blank">0011223344</a></td>
<td class=" text-center">9988776655</td>
<td class=" text-center">Jane Doe</td>
</tr>
</tbody>
</table>
jQuery:
//Id's elementos seleccionados
var idSelectedFlotAlu = ''; //ID of Selected Student
var idSelectedFlotM = ''; //ID of Maths homework done
var idSelectedFlotP = ''; //ID of Physics homework done
var idSelectedFlotL = ''; //ID of Spanish homework done
var idSelectedFlotEF = ''; //ID of Physics Eduaction homework done
//Valores elementos selecciondos
var valSelectedFlotAlu = '';
var valSelectedFlotM = '';
var valSelectedFlotF = '';
var valSelectedFlotL = '';
var valSelectedFlotEF = '';
function myFunction(idElemento) {
idSelectedFlotAlu = "#" + idElemento;
console.log("ID of idSelectedFlotAlu: " + idSelectedFlotAlu);
idSelectedFlotM = idSelectedFlotAlu + "M";
console.log("ID of idSelectedFlotM: " + idSelectedFlotM);
idSelectedFlotF = idSelectedFlotAlu + "F";
console.log("ID of idSelectedFlotF: " + idSelectedFlotF);
idSelectedFlotL = idSelectedFlotAlu + "L";
console.log("ID of idSelectedFlotL: " + idSelectedFlotL);
idSelectedFlotEF = idSelectedFlotAlu + "EF";
console.log("ID of idSelectedFlotEF: " + idSelectedFlotEF);
valSelectedFlotAlu = $(idSelectedFlotAlu).prop('href');
console.log("Value of valSelectedFlotAlu: " + valSelectedFlotAlu);
valSelectedFlotM = $(idSelectedFlotM).text();
console.log("Value of valSelectedFlotM: " + valSelectedFlotM);
valSelectedFlotF = $(idSelectedFlotF).text();
console.log("Value of valSelectedFlotF: " + valSelectedFlotF);
valSelectedFlotL = $(idSelectedFlotL).text();
console.log("Value of valSelectedFlotL: " + valSelectedFlotL);
valSelectedFlotEF = $(idSelectedFlotEF).text();
console.log("Value of valSelectedFlotEF: " + valSelectedFlotEF);
}
You can use .prev() to get the immediately preceding sibling element in jquery:
$(idSelectedFlotAlu).prev("a").text()
Here's a minimal snippet:
var idSelectedFlotAlu = ''; //ID of Selected Student
function myFunction(idElemento) {
idSelectedFlotAlu = "#" + idElemento;
console.log($(idSelectedFlotAlu).prev("a").text())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John Doe
<i class="fas fa-chart-pie" id="test1" onclick="myFunction(this.id)"></i></td>
</tr>
</tbody>
</table>
Updated fiddle
Please see the fiddle. When I click the cell, I can get the column index and row index. I wonder how to use these indexes to change the color of the table? The following is the Javascript code:
$('#example tbody').on( 'click', 'td', function () {
alert('Row ' + $(this).closest("tr").index());
alert('Column ' + $(this).closest("td").index());
});
The reason I have to use the indexes instead of $(this).color() is I have to save the indexes to also change a cell color of another table .
Change your JS code as below
$(document).ready(function() {
$("table tbody tr td").on("click", function() {
$(this).closest("table").find("td").css({
backgroundColor: "white"
});
$(this).css({
backgroundColor: "red"
});
});
});
I have created a CodePen, please take a look.
https://codepen.io/trgiangvp3/full/wqrwao/
Try something like this to get elements by ID, you could also do it with tag names:
var table = document.getElementById("table"),rIndex,cIndex;
// table rows
for(var i = 1; i < table.rows.length; i++)
{
// row cells
for(var j = 0; j < table.rows[i].cells.length; j++)
{
table.rows[i].cells[j].onclick = function()
{
rIndex = this.parentElement.rowIndex;
cIndex = this.cellIndex+1;
console.log("Row : "+rIndex+" , Cell : "+cIndex);
};
}
}
</script>
Check this example
$(document).ready(function(){
$('#example td').on( 'click', function () {
var trIndex = $(this).closest("tr").index();
var tdIndex = $(this).closest("td").index();
$('#example td, #example2 td').removeClass('red');
$(this).addClass('red');
$('#example2 tbody tr:eq('+trIndex+') td:eq('+tdIndex+')').addClass('red');
});
});
#example tbody tr td{ border:1px solid black}
#example2 tbody tr td{ border:1px solid black;}
.divider {height:40px; width:100%; background:#bfbfbf;}
.red {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" width="100%" class="display nowrap dataTable dtr-inline" id="example" role="grid" aria-describedby="example_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 133px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">
Name
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 224px;" aria-label="Position: activate to sort column ascending">
Position
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 100px;" aria-label="Office: activate to sort column ascending">
Office
</th>
<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 41px;" aria-label="Age: activate to sort column ascending">
Age
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 92px;" aria-label="Start date: activate to sort column ascending">
Start date
</th>
<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 77px;" aria-label="Salary: activate to sort column ascending">
Salary
</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="1" colspan="1">
Name
</th>
<th rowspan="1" colspan="1">
Position
</th>
<th rowspan="1" colspan="1">
Office
</th>
<th class="dt-body-right" rowspan="1" colspan="1">
Age
</th>
<th rowspan="1" colspan="1">
Start date
</th>
<th class="dt-body-right" rowspan="1" colspan="1">
Salary
</th>
</tr>
</tfoot>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
Brenden Wagner
</td>
<td>
Software Engineer
</td>
<td>
San Francisco
</td>
<td class=" dt-body-right">
28
</td>
<td>
2011/06/07
</td>
<td class=" dt-body-right">
$206,850
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td class=" dt-body-right">
61
</td>
<td>
2012/12/02
</td>
<td class=" dt-body-right">
$372,000
</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">
Bruno Nash
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td class=" dt-body-right">
38
</td>
<td>
2011/05/03
</td>
<td class=" dt-body-right">
$163,500
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td class=" dt-body-right">
21
</td>
<td>
2011/12/12
</td>
<td class=" dt-body-right">
$106,450
</td>
</tr>
</tbody>
</table>
<div class="divider"></div>
<table cellspacing="0" width="100%" class="display nowrap dataTable dtr-inline" id="example2" role="grid" aria-describedby="example_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 133px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">
Name
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 224px;" aria-label="Position: activate to sort column ascending">
Position
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 100px;" aria-label="Office: activate to sort column ascending">
Office
</th>
<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 41px;" aria-label="Age: activate to sort column ascending">
Age
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 92px;" aria-label="Start date: activate to sort column ascending">
Start date
</th>
<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 77px;" aria-label="Salary: activate to sort column ascending">
Salary
</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="1" colspan="1">
Name
</th>
<th rowspan="1" colspan="1">
Position
</th>
<th rowspan="1" colspan="1">
Office
</th>
<th class="dt-body-right" rowspan="1" colspan="1">
Age
</th>
<th rowspan="1" colspan="1">
Start date
</th>
<th class="dt-body-right" rowspan="1" colspan="1">
Salary
</th>
</tr>
</tfoot>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td class=" dt-body-right">
33
</td>
<td>
2008/11/28
</td>
<td class=" dt-body-right">
$162,700
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">
Angelica Ramos
</td>
<td>
Chief Executive Officer (CEO)
</td>
<td>
London
</td>
<td class=" dt-body-right">
47
</td>
<td>
2009/10/09
</td>
<td class=" dt-body-right">
$1,200,000
</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td class=" dt-body-right">
66
</td>
<td>
2009/01/12
</td>
<td class=" dt-body-right">
$86,000
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td class=" dt-body-right">
41
</td>
<td>
2012/10/13
</td>
<td class=" dt-body-right">
$132,000
</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">
Brenden Wagner
</td>
<td>
Software Engineer
</td>
<td>
San Francisco
</td>
<td class=" dt-body-right">
28
</td>
<td>
2011/06/07
</td>
<td class=" dt-body-right">
$206,850
</td>
</tr>
</tbody>
</table>
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