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");
});
Related
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 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>
I have a table containing parent and child rows. Child rows can be collapsed using bootstraps default collapse mechanism. All rows can be reordered using datatables rowReorder. Now if I drag&drop a parent row, it's child rows are not moved, of course. How can I achieve that behavior?
Here's a jsfiddle of what I currently have, use the salary column to start dragging a row:
$(document).ready(function() {
var table = $('#example').DataTable({
"columnDefs": [{
targets: 0,
visible: false
}],
rowReorder: {
selector: 'td:last-child'
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/rowreorder/1.1.2/css/rowReorder.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/rowreorder/1.1.2/js/dataTables.rowReorder.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" />
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Seq</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Seq</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td><i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed1">+</i><b>Tiger Nixon (parent)</b>
</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr class="collapse collapsed1">
<td>2</td>
<td>Garrett Winters (child)</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr class="collapse collapsed1">
<td>3</td>
<td>Ashton Cox (child)</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>4</td>
<td><b>Cedric Kelly(parent)</b>
</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>5</td>
<td><b>Jenna Elliott (parent)</b>
</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<br/>
<ul>
<li>Collapse/show child entries of Tiger Nixon using the plus sign.</li>
<li>Drag rows by touching the salary column.</li>
</ul>
</div>
Use DataTable's child feature instead.
Here's the JSbin of demo
http://live.datatables.net/cihefawi/17
Modify it to add child rows dynamically, using ajax or something.
Your implementation of parent and child rows is not right because you are not using any of the existing data table features here.
You are adding a patch(collapsible) for parent-child rows and for it to support you will have to add many other patches as well to support other features of data tables, like: sorting, searching etc.
I would recommend you to look at this link. It shows how you can implement collapsible data/details. You can modify the content to look like a row but still the features of data-tables will not work on those rows. Ideally they are only supposed to work on parent rows. Rest depends on your requirements and implementation.
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 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