I have a DataTable that I fill in from database. I'd like to change the value of the selected cell.
I don't know how to change cell's value by using the cell and row index. How can I do that?
this is what I have:
$('#dtBasicExample').on('click', 'tbody td', function() {
var table = $('#dtBasicExample').DataTable();
//Content I want to insert i the cell
var NewValue= 'NewValue';
//get cell index
var CellIndex=table.cell( this ).index().columnVisible;
//get row index
var RowIndex= table.cell( this ).index().row;
})
To change the data in a cell, you need the cell().data() function from the DataTables API: https://datatables.net/reference/api/cell().data()
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('click', 'td', function() {
var colIndex = table.cell(this).index().column;
var rowIndex = table.cell(this).index().row;
table.cell(rowIndex, colIndex).data("new")
});
});
A simpler approach:
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('click', 'td', function() {
table.cell(this).data("new");
});
});
With demo:
$('#example').on('click', 'td', function() {
var table = $(this).closest('table').DataTable();
table.cell(this).data("new");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<p>Click any cell and check how we simply change it</p>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Numero</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>155555</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>1</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>1</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tfoot>
</table>
Related
Here I set as described the data table thousand separator, but it doesn't work the way I expected.
Can anybody help me?
$('#example').dataTable( {
"language": {
"thousands": "'"
}
} );
table.dataTable thead th {
border-bottom: 0;
}
table.dataTable tfoot th {
border-top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/plug-ins/1.10.24/sorting/formatted-numbers.js"></script>
<table id="example">
<thead>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>320800</td>
</tr>
<tr>
<td>22</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2011/07/25</td>
<td>170750</td>
</tr>
<tr>
<td>6</td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>2009/01/12</td>
<td>86000</td>
</tr>
<tr>
<td>41</td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>2012/03/29</td>
<td>433060</td>
</tr>
<tr>
<td>55</td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2008/11/28</td>
<td>162700</td>
</tr>
<tr>
<td>21</td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>2012/12/02</td>
<td>372000</td>
</tr>
<tr>
<td>46</td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>2012/08/06</td>
<td>137500</td>
</tr>
</tbody>
</table>
Thanks
You can use a column render function to convert your source data from numbers without thousands separators to the format you want.
$(document).ready(function() {
var table = $('#example').DataTable( {
"lengthMenu": [ 5, 10, 50, 100 ], // just for testing!
columnDefs: [
{
targets: [5],
render: function ( data, type, row, meta ) {
return '$' + parseInt(data).toLocaleString('en-US');
}
}
]
} );
} );
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>320800</td>
</tr>
<tr>
<td>22</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2011/07/25</td>
<td>170750</td>
</tr>
<tr>
<td>6</td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>2009/01/12</td>
<td>86000</td>
</tr>
<tr>
<td>41</td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>2012/03/29</td>
<td>433060</td>
</tr>
<tr>
<td>55</td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2008/11/28</td>
<td>162700</td>
</tr>
<tr>
<td>21</td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>2012/12/02</td>
<td>372000</td>
</tr>
<tr>
<td>46</td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>2012/08/06</td>
<td>137500</td>
</tr>
</tbody>
</table>
</div>
</body>
This has the following features:
It will work for every record in the table, not just for those which are displayed on the first page.
It does not require a regular expression such as data.replace(/\B(?=(\d{3})+(?!\d))/g, ","); - and is therefore easier to understand.
It uses JavaScript's built-in support for number formatting using toLocaleString. This means it is also possible to change the thousands separator by applying a different locale (the language tag). For example, if you replace 'en-US' with fr-FR, then you will get the type of thousands separator used in France, which is a space - so $320 800 instead of $320,800.
The above code assumes the source data is provided as number without a currency symbol:
<td>320800</td>
If the source data already has a currency symbol at the start of the string, for example, like this:
<td>$320800</td>
then you would need to adjust the render function as follows:
render: function ( data, type, row, meta ) {
return data.substring(0, 1) + parseInt(data.substring(1)).toLocaleString('en-US');
}
I resolve the issue , I using following code
$('#example').dataTable( {
"language": {
"thousands": "'"
}
} );
function numberWithCommas(number) {
var parts = number.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join(".");
}
$(document).ready(function() {
$("#example td").each(function() {
var num = $(this).text();
var commaNum = numberWithCommas(num);
$(this).text(commaNum);
});
I have tried many examples returned by searching on jQuery datatable and so far have not found anything that can give me the contents of a selected row. The closest example I have found is this one which, however, gives the numbers of rows selected, but neither the content of a selected row, nor how to find out which row and so on.
I'm actually only interested in a single selected row.
The lines of interest are:
action: function () {
var count = table.rows( { selected: true } ).count();
events.prepend( '<div>'+count+' row(s) selected</div>' );
}
I would like to be able to get the contents of the row (s). I actually only want a single row selected, but this example covers multiple lines.
An extract of the HTML and the full JavaScript is below:
$(document).ready(function() {
var events = $('#events');
var table = $('#example').DataTable({
dom: 'Bfrtip',
select: true,
buttons: [{
text: 'Get selected data',
action: function() {
var count = table.rows({
selected: true
}).count();
events.prepend('<div>' + count + ' row(s) selected</div>');
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net/2.1.1/jquery.dataTables.min.js"></script>
<div id="events">
Row selected count - new information added at the top
</div>
<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>
</tbody>
</table>
I am making use of the Datatables plugin and it automatically allows column filtering on all columns. Is there a way for me to strict filtering on columns to the 2nd to the 6th columns in my HTML tables I tried to follow this jQuery DataTables Filtering for Specific Columns Only But its not working for me.
Here is my working code
<script>
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('table thead tr').clone(true).appendTo( 'table thead' );
$('table thead tr:eq(1) th').each( function (i) {
if(i>=1 && i<=6)
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
$( 'input', this ).on( 'keyup change', function () {
if ( table.column(i).search() !== this.value ) {
table
.column(i)
.search( this.value )
.draw();
}
} );
} );
var table = $('table').DataTable( {
fixedHeader: true,
columnDefs: [
{ targets: 0, visible: false},
{ targets: '_all', visible: true },
]
} );
} );
</script>
Try this link! I think you have to pass the values of ids to the js file and then use those ids inside the datatables filter option
link
Column Filtering occurs for each th that is placed in the table.
If you want to remove the filter you can apply one of the following solutions.
1. You can change th to td for columns that you don't need filter
2. Add a class to columns that don't want the filter. This class will be added to th because the filter is applied to them. I added a snippet for this example. I added to the column that i didn't want filter(Start Date) the class noFilter. For those th i added a span(You can choose whatever you want).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>
<script>
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example thead tr').clone(true).appendTo('#example thead');
$('#example thead tr:eq(1) th').each(function (i) {
if (!$(this).hasClass("noFilter")) {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
$('input', this).on('keyup change', function () {
if (table.column(i).search() !== this.value) {
table
.column(i)
.search(this.value)
.draw();
}
});
}
else {
$(this).html('<span></span>');
}
});
var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true,
columnDefs: [
{ targets: 0, visible: true }
]
});
});
</script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css">
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th class="noFilter">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>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</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>
</body>
</html>
I have a table draw by DataTables. For every rows, last column of the table is a buttom which shows other jquery element (bxslider in my case, but it does not matter here). I want to be able to change the color of a row when I click on it buttom. I found some solutions but these only change the color before draw a DataTable, not running when a DataTables is draw already.
The buttoms have the html class "onclick".
I draw a datatable as follows:
$(div).DataTable({"data" : dataSet, "columns": columns})
Haw can I do that?
Thank you, regards.
Mike
Will something like this work?
//initialise datatables on DOM load
$(document).ready(function() {
$('#example').DataTable();
});
//on clicking the row
$("tbody tr").on("click", function() {
//loop through all td elements in the row
$(this).find("td").each(function(i) {
//toggle between adding/removing the 'active' class
$(this).toggleClass('active');
});
});
/* Set !important rule to override default colors */
.active {
background: gold !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" cellspacing="0" 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>$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>
</tbody>
</table>
$('#dataTable').on('click', 'tr', function () {
$(this).css("background-color", "#eeeeee");
});
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