I'm trying to get the column Position for each selected rows and add it in a list with id items.
I managed to get how many rows are selected but not the actual value. Can anyone help me with this?
PS: you have to click in the row
Example: If I select first and second row I should get a list with Accountant and System Architect
Working Code, you can edit it.
$(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>');
}
}]
});
});
#events {
margin-bottom: 1em;
padding: 1em;
background-color: #f6f6f6;
border: 1px solid #999;
border-radius: 3px;
height: 100px;
overflow: auto;
}
<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>
<script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div id="events">
Row selected count - new information added at the top
</div>
<ul id="items"></ul>
<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>
</tbody>
</table>
You can use event delegation and attach a click handler on the element. to get the position of the <tr> you can use the index() jQuery function and to get the text you can use the jQuery text() function , try you the below code:
$(document).on('click', 'table tr > td', function() {
console.log($(this).parent().index() + ' ' + $(this).index()); // Will console.log the parent() index and also the index of the <tr> clicked on.
$('ul#items').append('<li>' + $.trim($(this).text()) + '</li>');
return false;
});
Related
I want to position the filter bar and other elements from my datatables table to a complete other part of my page. In particular, I'd like to move the search filter bar to the section titled 'filters' - and in the process, learn how to move any of these elements. However, I can't seem to figure out how to do it and have only had luck moving them to the top and bottom of the table. I've tried with getElementById but had no luck.
This is a simple example code, but please note that I am using a Flask app which draws data in via python and the actual datatable itself is a bit more complicated.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Datatables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<div class="filters">
I have a bunch of filters sitting on the left here and want to move some parts from the datatable here.
</div>
<div class="main">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
$('#example').DataTable();
});
</script>
CSS
.filters {
position: fixed;
width: 34%;
height: 100%;
overflow: hidden;
background-color:lightgray;
}
.main {
position: absolute;
width: 66%;
height: 100%;
left: 34%;
top: 10%;
padding-left:10px;
padding-top:20px;
}
Desired Result
I figured out a solution.
You can add an input into the HTML, then call that input and use the following,
$('#searchInput').keyup(function () {
oTable.search($(this).val()).draw();
});
Full solution:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<div class="filters">
<!-- SOLUTION PART 1 -->
<form class="form">
<div>
<input type="text" id="searchInput" class="form-control" placeholder=" Search">
</div>
</form>
</div>
<div class="main">
<table id="example" class="example" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
</tbody>
</table>
</div>
<script>
// SOLUTION PART 2
$(document).ready(function () {
var oTable = $('#example').DataTable({
"pagingType": "simple",
"ordering": "false",
"dom": '<<t>ip>'
});
$('#searchInput').keyup(function () {
oTable.search($(this).val()).draw();
});
});
</script>
CSS
.filters {
position: fixed;
width: 34%;
height: 100%;
overflow: hidden;
background-color:lightgray;
}
.main {
position: absolute;
width: 66%;
height: 100%;
left: 34%;
top: 10%;
padding-left:10px;
padding-top:20px;
}
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 using the jQuery plugin DataTables (http://datatables.net) for pagination, search capabilities and filtering.
Here I am in need to display the Pecent and Salary rows which does not contain 0.00. I tried the below regex but not working.
'^/[+-]?((\0+.?\0*)|(.\0+))$'
Please help me to achieve this.
demo_link
HTML Code:
$(document).ready( function () {
var table = $('#example').DataTable();
// Filter out rows which do not contain a plus sign
table.search( '^/[+-]?((\0+\.?\0*)|(\.\0+))$ ', true, false ).draw();
} );
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Pecent</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>Pecent</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Non Zero row</td>
<td>0.00</td>
<td>System + Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>1222</td>
<td>3.12</td>
</tr>
<tr>
<td>Zero row 1</td>
<td>12.00</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>0.00</td>
</tr>
<tr>
<td>Zero row 2</td>
<td>13.43</td>
<td>Test</td>
<td>India</td>
<td>53</td>
<td>2011/07/25</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
If you just want to remove the rows with a "0.00" in the last cell, you could remove that rows using standard jQuery methods before creating the data table.
You can add further logic of course by changing the selector in .find(), if you excude rows with "Pecent" OR "Salary" equal "0.00" your example table would be empty, so i just check for the last cell here:
$(function() {
$('#example')
.find("tbody td:last-child")
.filter(function(idx, el) {
return $(el).text() === "0.00"
})
.closest("tr")
.detach();
$('#example').DataTable();
});
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Pecent</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>Pecent</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Non Zero row</td>
<td>0.00</td>
<td>System + Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>1222</td>
<td>3.12</td>
</tr>
<tr>
<td>Zero row 1</td>
<td>12.00</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>0.00</td>
</tr>
<tr>
<td>Zero row 2</td>
<td>13.43</td>
<td>Test</td>
<td>India</td>
<td>53</td>
<td>2011/07/25</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm using responsive datatable (https://www.datatables.net/extensions/responsive/examples/display-control/classes.html). but the expand/collapse icon is appearing in the left side of the first column's value.
How can I change that to appear in the right side of first column's value.
Also want to change the icon style to use Font Awesome's icon
JS:
$(document).ready( function () {
var table = $('#example').DataTable({
responsive: {
details: {
type: 'column'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
});
} );
HTML Code:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<table id="example" class="display responsive" width="100%">
<thead>
<tr>
<th></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></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></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Move the blank <th></th> to the last column and update the target value to the last as well.
$(document).ready( function () {
var table = $('#example').DataTable({
responsive: {
details: {
type: 'column'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 5
} ],
order: [ 1, 'asc' ]
});
} );
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css" rel="stylesheet"/>
<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>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div class="container">
<table id="example" class="display responsive" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th></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>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>`
There is a css Selector
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before
which defines the position of the element.
In your css overwrite it:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
left: auto;
right: 4px;
}
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");
});