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>
Related
I am using Bootstrap to build a website that calculates some one-variable statistics and displays the result. However, when the results are displayed, the table looks very uneven, as shown here (in the bottom table:
The contents of the table rows are filled by a JavaScript function (which does work).
.table {
width: 80vw;
content-align: center;
margin: 20px auto;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Statistics</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"> </script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Mean</th>
<th scope="col">Mode</th>
<th scope="col">Standard Deviation</th>
<th scope="col">Variance</th>
<th scope="col">Range</th>
</tr>
</thead>
<tbody>
<tr id="others">
</tr>
</tbody>
</table>
</body>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="table table-striped table-hover responsive" style="width:100%">
<thead>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</thead>
<tbody>
<tr>
<td>hi 1</td>
<td>hi 2</td>
<td>hi 3</td>
<td>hi 4</td>
<td>hi 5</td>
<td>hi 6</td>
</tr>
<tr>
<td>hi 1</td>
<td>hi 2</td>
<td>hi 3</td>
<td>hi 4</td>
<td>hi 5</td>
<td>hi 6</td>
</tr>
</tbody>
</table>
1- THs needs to be inside a TR (table row)
2- TH and TD needs to match (use colspan to match if you don't have the relative TD).
<tbody>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</thead>
<tbody>
<tr id="others">
<td colspan="6"></td>
</tr>
</tbody>
</tbody>
I am trying to vertical-align my dataTable, here is my table:
$(document).ready(function() {
$('#example').DataTable();
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<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>
<th>Country</th>
<th>Town</th>
<th>School</th>
<th>Degree</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>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</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>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
</table>
</div>
What am trying to achieve is this:
Instead of horizontal alignment, I want to achieve vertical alignment: Can I achieve something like that? I didn't find anything similar to this.
Can anybody try to help me with this?
You can the table content to:
<div class="container">
<table id="example" class="display" style="width:100%">
<tr>
<th>Name</th>
<td>Tiger Nixon</td>
<td>Garrett Winters</td>
</tr>
<tr>
<th>Position</th>
<td>System Architect</td>
<td>Accountant</td>
</tr>
<tr>
<th>Office</th>
<td>Edinburgh</td>
<td>Tokyo</td>
</tr>
<tr>
<th>Age</th>
<td>61</td>
<td>63</td>
</tr>
<tr>
<th>Start date</th>
<td>2011/04/25</td>
<td>2011/07/25</td>
</tr>
<tr>
<th>Salary</th>
<td>$320,800</td>
<td>$170,750</td>
</tr>
<tr>
<th>Country</th>
<td>UK</td>
<td>UK</td>
</tr>
<tr>
<th>Town</th>
<td>London</td>
<td>London</td>
</tr>
<tr>
<th>School</th>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<th>Degree</th>
<td>Phd</td>
<td>Phd</td>
</tr>
</table>
</div>
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'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;
});
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");
});